css居中的几种方式

居中分水平和垂直两种，使用的频度也算是很高，下面分情况来讨论一下几种常用的实现方式。

1.margin

这种方式只能实现固定宽度的块级元素水平居中，如果该元素没有设置宽度或者不是块级元素，则不会生效。

1
2
3
4
5
6
/*以div元素为例*/
div{
    width: 100px;
    height: 100px;
    margin: auto; /*或者margin: 0 auto;*/
}

2.line-height

将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中，局限也很明显。

1
2
3
4
5
6
7
8
9
10
<div id='container'>
    <p id='content'>文字内容</p>
</div>

#container{
    height: 30px;
}
#content{
    line-height: 30px;
}

3.表格

如果你使用表格的话，那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中，但是考虑到现在表格布局的使用频率已经很低了，实用性其实并不强。

1
2
3
4
5
6
7
<table>
    <tr>
        <td width='200px' height='200px' align='center' valign='middle'>
            <!-- 子元素 -->
        </td>
    </tr>
</table>

4.display: table-cell

由于单元格可以轻易的实现水平和垂直居中，所以可以把父元素容器模拟成单元格元素，通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。

1
2
3
4
5
6
7
8
9
10
11
<div id="table-cel">
    <div></div>
</div>

#table{
    display: table-cell;
    width: 200px;
    height: 200px;
    vertical-align: middle;
    text-align: center;
}

5.绝对定位居中

这个方法使用的相对也较多，但是需要子元素有固定的宽高，不多说直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <div></div>
</body>
html,
body{
    width: 100%;
    height: 100%;
}
body{
    position: relative;
}
body>div{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    /*此时的元素并不是居中的，向右偏了一半的宽度，向下偏了一半的高度*/
    /*所以要使用margin把元素拉回来*/
    margin: -50px 0 0 -50px; 
}

6.translate(-50%, -50%)

这个方法比较厉害了，其实可以算是前面绝对定位方法的改良版。之前的方法只能使固定宽高的元素居中，但是使用transform: translate(-50%, -50%);可以使不固定高宽的元素达到居中的效果。因为translate属性的百分比值是根据它本身而非父元素，下面看代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="father">
    <div id="child"></div>
</div>

#father{
    width: 200px;
    height: 200px;
    position: relative;
}
#child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}