css居中的几种方式 - 天上云好白

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

欢迎指正文中的错误，同时如果有学习到新的方式也会更新在后面，也方便以后温故知新。

1.margin

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

<span style="color: #008000;">/*</span><span style="color: #008000;">以div元素为例</span><span style="color: #008000;">*/</span><span style="color: #800000;">
div</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> auto</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">或者margin: 0 auto;</span><span style="color: #008000;">*/</span>
}

2.line-height

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">='container'</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">='content'</span><span style="color: #0000ff;">>文字内容</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

<span style="color: #800000;">#container</span>{<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 30px</span>;
}<span style="color: #800000;">
#content</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;"> 30px</span>;
}

3.表格

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

<span style="color: #0000ff;"><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">td </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">='200px' </span><span style="color: #ff0000;">height</span><span style="color: #0000ff;">='200px' </span><span style="color: #ff0000;">align</span><span style="color: #0000ff;">='center' </span><span style="color: #ff0000;">valign</span><span style="color: #0000ff;">='middle'</span><span style="color: #0000ff;">></span>
            <span style="color: #008000;"><!--</span><span style="color: #008000;"> 子元素 </span><span style="color: #008000;">--></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span></span></span></span>

4.display: table-cell

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="table-cel"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

<span style="color: #800000;">#table</span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> table-cell</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    vertical-align</span>:<span style="color: #0000ff;"> middle</span>;<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;"> center</span>;
}

5.绝对定位居中

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

<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></span></span>

<span style="color: #800000;">html,
body</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
body</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
}<span style="color: #800000;">
body>div</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;
    <span style="color: #008000;">/*</span><span style="color: #008000;">此时的元素并不是居中的，向右偏了一半的宽度，向下偏了一半的高度</span><span style="color: #008000;">*/</span>
    <span style="color: #008000;">/*</span><span style="color: #008000;">所以要使用margin把元素拉回来</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> -50px 0 0 -50px</span>; 
}

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

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

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="father"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="child"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

<span style="color: #800000;">#father</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;
}<span style="color: #800000;">
#child</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(-50%,-50%)</span>;<span style="color: #ff0000;">
    -webkit-transform</span>:<span style="color: #0000ff;"> translate(-50%,-50%)</span>;
}