html css怎样让div居中

た入场券 2021-10-19 05:24 386阅读 0赞

## 很多时候我们都需要div居中   用css3的transform属性即可让div居中   如代码所示 ##

## 先设置子元素的margin-top和margin-left为50%   接着用transform的translate来移动子元素为-50%   translate相对的是元素本身进行移动，这样移动-50%（元素宽度的一半）即可居中了   不过因为新特性，所以兼容性不好，如果考虑IE的话，慎重使用 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #parent{
                width: 500px;
                height: 500px;
                background: deepskyblue;
                border: 1px solid red;
            }
            #child{
                width: 300px;
                height: 300px;
                background: deeppink;
                margin-left: 50%;
                margin-top: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child">child</div>
        </div>
    </body>
    </html>

##      ##

发表评论取消回复

表情：

评论列表（有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

相关 DIV CSS 居中

你对DIV CSS居中的方法是否了解，这里和大家分享一下，用CSS让元素居中显示并不是件很简单的事情，让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 DIV C

清疚/ 2022年08月27日 02:26/ 0 赞/ 296 阅读

相关 CSS中怎么让DIV居中

CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌

分手后的思念是犯贱/ 2022年08月26日 15:19/ 0 赞/ 270 阅读

相关 DIV+CSS如何让文字垂直居中？

CSS网页布局DIV水平居中的各种方法一、单行垂直居中如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它

不念不忘少年蓝@/ 2022年07月16日 11:47/ 0 赞/ 289 阅读

相关 css垂直居中--div

面试到css的时候，人们经常会问给你一个div固定宽度. <!DOCTYPE html> <html lang="en"> <head> <

「爱情、让人受尽委屈。」/ 2022年07月15日 23:18/ 0 赞/ 309 阅读

相关 div+css之让ul及li水平居中于div

<div class="footer-desc"> <ul> <li><a href="">网站地图</a></

今天药忘吃喽~/ 2022年06月10日 09:47/ 0 赞/ 192 阅读

相关 HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

HTML+CSS技术学习 [https://www.itkc8.com][https_www.itkc8.com] 最近写网页经常需要将div在屏幕中居中显示，遂记录下几个

向右看齐/ 2022年04月22日 03:36/ 0 赞/ 326 阅读

相关 DIV+CSS如何让文字垂直居中

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里

Bertha 。/ 2021年11月29日 05:54/ 0 赞/ 470 阅读

相关 DIV绝对居中(CSS)

<style type="text/css"> <!-- \hc\{ height:200px; width:400px; margin:\-1

淡淡的烟草味﹌/ 2021年11月02日 16:02/ 0 赞/ 348 阅读

相关 flex布局怎样让div居中

用flex布局可以让div或者其他元素居中请看代码可以设置div的display属性为flex，然后设置align-items：center; justify-

痛定思痛。/ 2021年10月19日 05:26/ 0 赞/ 1017 阅读

相关 html css怎样让div居中

很多时候我们都需要div居中用css3的transform属性即可让div居中如代码所示先设置子元素的margin-top和margin-left为50%

た入场券/ 2021年10月19日 05:24/ 0 赞/ 387 阅读