元素的水平居中总结

最新推荐文章于 2023-02-13 18:22:12 发布

冕妄

最新推荐文章于 2023-02-13 18:22:12 发布

阅读量374

点赞数

分类专栏：前端 css 文章标签： css

本文链接：https://blog.csdn.net/creasher/article/details/51318055

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

1.行内元素：这个比较简单，一般使用text-align：center就可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #div1{
            text-align:center;
            background-color:#ddd;
            border: 1px solid red;
        }
    </style>
<body>
    <div id="div1">
        行内居中
    </div>
</body>
</html>

2.块级元素。

如果是定宽的那很简单，用margin：0 auto;就可以。其实就是把左右外边距设置为自动，而上下外边距随意。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #div1{
            width:200px;
            margin:0 auto;    
            border:1px solid red;
        }
    </style>
<body>
    <div id="div1">
        块居中11111111
    </div>
</body>
</html>

如果是不定宽的，有几种方法。
（1）将元素用table标签框起来。注意要有tr td ,然后用margin。。。（这是因为table的一个宽度自适应性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        table{
            margin:0 auto;
        }
        #div1{                           
            border: 1px solid red;
        }
    </style>
<body>
    <table>
    <tr><td>
    <div id="div1">
        块居中1111
    </div>
    </td></tr>
    </table>
</body>
</html>

（2）和第一种类似，将元素设置为display:table ,然后用margin。。。。
不过要注意的是它不兼容ie8以下的版本

#div1{                           
            border: 1px solid red;
            display: table;
            margin:0 auto;
        }

（3）用display:inline ，然后在外面框一个元素，设置text-align：center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

        #div0{                           
           text-align: center;
        }
        #div1{
            display: inline;
            border:1px solid red;
        }
    </style>
<body>
    <div id="div0">
        <div id="div1">
            块居中111
        </div>
    </div>
</body>
</html>

（4）用position去定位。可以在父元素设置 position:relative;float:left;left:50%，然后给子元素设置position:relative;left:-50%。这个很好理解，如果父元素left：50%，那么父元素的开始会距离左边50%的距离（相对原来），然后把子元素向左移动父元素一半距离（这里也就相当于移动自身50%的距离），那么相对原来就是居中了！
~(≧▽≦)/~
嘛，这里要注意的是要设置浮动。如果不设置浮动，那么它的宽度就是原来默认的宽度（一般就是屏幕的内容长度–不定）；而设置浮动之后，如果不设置宽度，那么它会尽可能的窄（也就是适应内容的宽度了），就会在后来达到类似定宽的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">

        #div0{                           
           float: left;/*重要*/
           position: relative;
           left:50%;
           border:1px solid yellow;
        }
        #div1{
            position:relative;
            left:-50%;
            border:1px solid red;
        }
    </style>
<body>
    <div id="div0">
        <div id="div1">
            块居中11111111111111111111111111111
        </div>
    </div>
</body>
</html>

6.26补充，用css3的transform的translate属性也可以实现水平垂直居中，它需要与position合用。
例如：

.wrapper {
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%);
  transform:translate(-50%);
}