CSS 各种居中实现整理

<center>标签

对其所包括的文本进行水平居中。

text-align:center

text-align:center，在父容器里水平居中 inline 文字，或 inline 元素

vertical-align:middle

垂直居中 inline 文字，inline 元素，配合 display：table，display：table-cell，有奇效。

line-height

与 height 公用设置相同高度，垂直居中文字。

margin:auto

<style>
    #ex2_container { width:200px; background-color:yellow; }
    #ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }
</style>
<div id="ex2_container">
    <div id="ex2_content">Hello World</div>
</div>

hacks, hacks（小技巧）

有许多 hacks ，负 margin，影子元素 ::before 等。如果你的内容不是固定大小的话，它们大部分是很脆弱的。

translate(-50%,-50%)

用 position 加 translate translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。

<style>
    #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; }
    #ex3_content { 
        left:50%; top:50%; 
        transform:translate(-50%,-50%); 
        -webkit-transform:translate(-50%,-50%); 
        background-color:gray;
        color:white; 
        position:absolute;
    }
</style>
<div id="ex3_container">
    <div id="ex3_content">Hello World</div>
</div>

绝对定位居中

父容器元素：position: relative

.Absolute-Center {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

注意：高度必须定义，建议加 overflow: auto，防止内容溢出。

视口居中

内容元素：position: fixed，z-index: 999，记住父容器元素 position: relative

.Absolute-Center .is-Fixed {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 999;
}

响应式

百分比宽高，最大、最小宽度均可以，加 padding 也可以

.Absolute-Center .is-Responsive {
    width: 60%;
    height: 60%;
    min-width: 400px;
    max-width: 500px;
    padding: 40px;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

偏移

只要 margin: auto; 在，内容块将垂直居中，top, left, bottom, right 可以设置偏移。

.Absolute-Center .is-Right {
    width: 50%;
    height: 50%;
    margin: auto;
    overflow: auto;
    position: absolute;
    top: 0; left: auto; bottom: 0; right: 20px;
    text-align: right;
}

溢出

居中内容比父容器高时，防止溢出，加 overflow: auto （没有任何 padding 时，也可以加 max-height: 100%;）。

.Absolute-Center .is-Overflow {
    width: 50%;
    height: 300px;
    max-height: 100%;
    margin: auto;
    overflow: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

调整尺寸

resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸，确定加了 overflow: auto 。

.Absolute-Center .is-Resizable {
    min-width: 20%;
    max-width: 80%;
    min-height: 20%;
    max-height: 80%;
    resize: both;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

图像

图像同样适用，设置 height: auto;

.Absolute-Center .is-Image {
    width: 50%;
    height: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

可变高度

高度必须定义，但可以是百分比或 max-height。不想定义高度的话，用 display: table （需要考虑 Table-Cell 兼容性）。

.Absolute-Center .is-Variable {
    display: table;
    width: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

display：table的几个用法

DIV+CSS的布局已经让表格布局几乎很少用到，除非表格语义性很强的情况。display：table解决了一部分需要使用表格特性但又不需要表格语义的情况，尤其是DIV+CSS很不方便解决的问题，比如以下两种情况：

一、父元素宽度固定，想让若干个子元素平分宽度

通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很麻烦。可以使用display：table来解决：

.parent{display: table;  width: 1000px;}
.son{display: table-cell;}

如此一来，就算是三个或者六个元素也可以很方便均分父元素的宽度了。

二、块级子元素垂直居中

想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题（注意直接对块级元素使用vertical-align是不能解决这个问题的，vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐），同样可以使用display：table方便解决：

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

将块级子元素的display设置为table-cell之后再使用vertical-align就可以了。

注意：虽然display：table解决了避免使用表格的问题，但有几个需要注意的：

• （1）display: table时padding会失效
• （2）display: table-row时margin、padding同时失效
• （3）display: table-cell时margin会失效

负 margin

确切知道宽高，负 margin 是宽和高的一半。

.is-Negative {
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%; left: 50%;
    margin-left: -170px; /* (width + padding)/2 */
    margin-top: -120px; /* (height + padding)/2 */
}

Table-Cell

结构：

<div class="Pos-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>

样式：

.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
    display: table-cell;
    vertical-align: middle;
}
.is-Table .Center-Block {
    width: 50%;
    margin: 0 auto;
}

FlexBox

.Pos-Container.is-Flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
       -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
       -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}