| 文章简介：CSS 居中大全 |
我看最近微博流行 CSS 居中技术，老外码农争相写相关的文章，一篇赛一篇的长啊，我把几篇归纳总结了一下，算是笔记。
孔乙己曾说：“茴香豆的回字有四种写法”，万一哪天有个面试官问你：“居中一共有几种写法”呢，哈哈，先备着吧~~
各种方法各有利弊，大家自己权衡吧，至少在需要居中时多个思路。
<center>
不建议用了。
text-align:center
在父容器里水平居中 inline 文字，或 inline 元素
vertical-align:middle
垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。
line-height
与 height 联手，垂直居中文字
margin:auto
示例：
1 2 3 4 5 |
|
hacks, hacks（小技巧）
有许多 hacks ，负 margin，影子元素 ::before 等。如果你的内容不是固定大小的话，它们大部分是很脆弱的。
translate(-50%,-50%)
用 position 加 translate translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。
参考文章：居中百分比宽高的元素
示例：
1 2 3 4 5 |
|
这个技巧相当嚣张，同样适用于没固定大小的内容，min-width，max-height，overflow:scroll等。
绝对定位居中
父容器元素：position: relative
1 2 3 4 5 6 7 8 |
|
注意：高度必须定义，建议加 overflow: auto，防止内容溢出。
视口居中
内容元素：position: fixed，z-index: 999，记住父容器元素 position: relative
1 2 3 4 5 6 7 8 9 |
|
模态窗口实例
响应式
百分比宽高，最大、最小宽度均可以，加 padding 也可以
1 2 3 4 5 6 7 8 9 10 11 |
|
偏移
只要 margin: auto; 在，内容块将垂直居中，top, left, bottom, right 可以设置偏移。
1 2 3 4 5 6 7 8 9 |
|
溢出
居中内容比父容器高时，防止溢出，加 overflow: auto （没有任何 padding 时，也可以加 max-height: 100%;）。
1 2 3 4 5 6 7 8 9 |
|
调整尺寸
resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸，确定加了 overflow: auto 。
1 2 3 4 5 6 7 8 9 10 11 |
|
图像
图像同样适用，设置 height: auto;
1 2 3 4 5 6 7 |
|
可变高度
高度必须定义，但可以是百分比或 max-height。不想定义高度的话，用 display: table （需要考虑 Table-Cell 兼容性）。
1 2 3 4 5 6 7 8 |
|
负 margin
确切知道宽高，负 margin 是宽和高的一半。
1 2 3 4 5 6 7 8 9 |
|
Table-Cell
参考文章：Flexible height vertical centering with CSS, beyond IE7
结构：
1 2 3 4 5 6 7 |
|
样式：
1 2 3 4 5 6 7 8 9 |
|
FlexBox
参考文章：Designing CSS Layouts With Flexbox Is As Easy As Pie
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
参考资料：
* Absolute Horizontal And Vertical Centering In CSS
* Absolute Centering in CSS
* CENTERING ALL THE DIRECTIONS
* Seven Ways of Centering With CSS
* How to Center Anything With CSS
* Vertical Centering With CSS
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索display
， margin
， auto
， position
， overflow
， center
， height
， 面试题大全
Table居中
，以便于您获取更多的相关知识。