元素的水平居中总结

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>

你可能感兴趣的:(css)