CSS水平居中与垂直居中

CSS水平居中与垂直居中总结

---

本文讨论各种情况的居中实现。
如需要多层结构来实现居中，html文档均统一如下：

<div class = 'parent'>
    <div class = 'child'></div>
</div>

---

1. 水平居中

1.1 margin水平居中

.child {
    width: 100px;
    margin:0 auto;
}

描述：确定宽度前提下，设置左右margin值为auto。
局限性：定宽，需要确定宽度，才能实现居中。

1.2 center标签元素水平居中

<center><div></div></center>

描述：使用html中的center标签强行居中。
局限性：需要在HTML上加上该标签，HTML5不支持，不利于结构样式分离原则。不建议用。

1.3 内联元素水平居中

.parent {
    text-align:center;
} 
.child {
    display: inline-block;
}

描述：父元素设置其内部的内联元素居中，设置子元素为inline-block，使子元素拥有内联元素特性。
局限性：parent内部的内联元素（包括文本），全部继承text-align:center属性，自行居中，需要自行设置text-align:left撤销。

1.4 float水平居中

.parent {
    float:left;
    position: relative;
    left: 50%;
}
.child {
    position: relative;
    left: -50%;
}

描述：float会使没设置width大小的块元素缩紧，使其大小由其内部元素撑开，子元素左移自身宽度的一半，完成居中。
局限性：过于繁琐。

1.5 position水平居中

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;                    //右移父元素的一半宽度
    transform: translateX(-50%); //左移自身宽度的一半 
}

描述：父元素设置为relative，子元素设置为absolute，则使子元素相对于父元素右移父元素的一半宽度，再使子元素左移自身宽度的一半。
局限性：略为繁琐，并且当浏览器宽度过小时，子元素会左边会部分移出浏览器，而不是产生横向滚动条以保留信息完整。且transform以及translate在稍微老一点的浏览器版本需要加前缀兼容。

1.6 table水平居中

.child {
    display: table;
    margin: 0 auto;
}

描述：设置子元素为块级表格来显示，并通过margin:0 atuo;居中，相对于1.1的居中方式，此居中方法可非定宽居中。
局限性：未知。

1.7 flex水平居中

.parent {
    display: flex;
    justify-content: center;
}

描述：flex布局，可以使多个子元素不换行同步居中。
局限性：需要兼容其他老旧浏览器，加各种前缀。

---

2. 垂直居中

2.1 单行文本垂直居中

.child {
    height: 200px;
    line-height: 200px;
}

描述：设置单行文本高度与与盒子高度一致。
局限性：只能单行文本。

2.2 table标签垂直居中

<table>
    <tr>
        <td>
            <div></div>
        </td>
    </tr>
</table>

描述：表格元素内部自动垂直居中，即其属性vertical-align值默认为middle。
局限性：不利于结构与样式分离。

2.3 table-cell激活verical-align属性垂直居中

.parent {
    display:table-cell;
    vertical-align:middle;  
}

描述：一般标签无vertical-align属性，可通过display:table-cell激活。
局限性：呃……不知道。IE7之前不支持算么？我们让IE先去屎一屎吧。

2.4 position垂直居中

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:50%;                    //下移父元素的一半高度
    transform: translateY(-50%); //上移自身高度的一半 
}

描述：同上述的1.5差不多，父元素设置为relative，子元素设置为absolute，则使子元素相对于父元素下移父元素的一半宽度，再使子元素上移自身宽度的一半。
局限性：略为繁琐，transform以及translate在稍微老一点的浏览器版本需要加前缀兼容。

2.5 flex垂直居中

.parent {
    display: flex;
    align-items: center;
}

描述：flex布局，可以使多个子元素同步垂直居中。
局限性：需要兼容其他老旧浏览器，加各种前缀。

---

3. 垂直水平同时居中

3.1.1 position 垂直水平居中

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}

3.1.2 position + margin 垂直水平居中

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0 ;
    margin:auto;
}

描述：综合1.5+2.4。
局限性：transform以及translate在稍微老一点的浏览器版本需要加前缀兼容。

3.2 table-cell垂直水平居中

.parent {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}
.child {
    display: inline-block;
}

描述：综合1.3+2.3。
局限性：同1.3：parent内部的内联元素（包括文本），全部继承text-align:center属性，自行居中，需要自行设置text-align:left撤销。

3.3 flex垂直水平居中

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

描述：综合1.7+2.5。
局限性：需要兼容其他老旧浏览器，加各种前缀。

3.4 flex垂直水平居中变种

.parent {
    display:flex;
}
.child {
    margin: auto;
}

描述：flex垂直水平居中的另一种实现。
局限性：需要兼容其他老旧浏览器，加各种前缀。

---

4 其他居中

4.1 单行文本水平居中多行文本左对齐

未知文本长度时，实现单行文本水平居中，多行文本时左对齐。

.parent {
    width: 100px;
    text-align: center;
}
.child {
    display: inline-block;
    text-align: left;
}

描述： 首先让child为inline-block，child的宽度根据内部文字的宽度伸缩；并让child整体居中。 当文字为一行时，child的宽度小于parent宽度，则文字居中（text-align: center;）。 当文字大于一行时，child 的宽度和parent的宽度一致，所以文字左对齐了（text-align: left;）