CSS 居中【整合】

<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``>

这个技巧相当嚣张，同样适用于没固定大小的内容，min-width，max-height，overflow:scroll 等。

绝对定位居中

父容器元素：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``;

}

负 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">

``

</``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``;

}

这里推荐一下我的前端学习交流群：784783012，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击：加入

原文地址：https://segmentfault.com/a/1190000016896535