建议学习时长： 45分钟
学习方式：深入

学习目标

• 了解常见的布局技巧。

详细介绍

元素的居中主要分为水平居中和垂直居中。

水平居中

元素内的行内元素

在元素上加

text-align:center;

宽度固定的块级元素

在元素上加

width: 宽度值;
margin-left: auto;
margin-right: auto;

或者用绝对定位

position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);

宽度不固定的块级元素

方法1

用display:inline-block。通过以下几个步骤

1. 元素设置text-align:center;
2. 元素设置font-size:0;。这样做是为了去除子元素间的空格的占位
3. 子元素设置display:inline-block;

方法2

需要通过以下几个步骤

1. 让元素的宽度变为所包含元素的内容。可以用浮动或绝对定位。
2. 元素向左移动其父级元素宽度的50%
3. 子元素向左移动其父级元素宽度的50%

例如，有如下的HTML结构

<ul id="no-sure-width-2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

样式为

#no-sure-width-2 {
    list-style: none;
    position: absolute;
    left: 50%;
    /* 用下面的两个样式 和使用 position: absolute;是等效的。本质上都是让元素的宽度变为所包含元素的宽度 */
    /*float:left;
    position: relative;*/

}

#no-sure-width-2>li {
    float: left;
    position: relative;
    left: -50%;
    /*right: 50%;*/ /*left -50%和right 50% 是等价的*/
    /*将每个分页项向左移动父元素宽度的50%*/
    background-color: #ddd;
    color: #fff;
    width: 20px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

水平居中总结

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+，Chrome，Firefox等。

还可以使用CSS3的flexbox，transform等方式来实现水平居中。但使用这些CSS3特性来做居中时，要注意下兼容性。

详细描述和更多实现见六种实现元素水平居中

垂直居中

单行文本的垂直居中

只需让元素的行高的值设置成和高度的值一样即可。如

height: 30px;
line-height: 30px;

高度不固定的元素的垂直居中

使用 Flex

父元素加

display: flex; 
align-items: center;

然后就搞定了，很简单吧。

使用 table 布局

父元素加

display: table; /*让元素以表格形式渲染*/
height: 200px; /* 需要定宽，定高 */
width: 100px;

子元素加

display: table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;

用绝对定位

父元素使用定位

position: relative; // absolute，fixed 也可以。只要不是 static。

子元素

position: absolute;
top: 50%;
transform: translateY(-50%);

参考

• CSS制作水平垂直居中对齐