前端之旅HTML与CSS篇之自己总结的关于居中的方法

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

2.line-height  与 height 相等时，垂直居中文字（文字垂直水平居中，同时满足1、2）

3.vertical-align:middle    ；垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效，如下

.parent {
width:800px;height:500px;border:2px solid ;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.child {
width:200px;height:200px;
display:inline-block;
background-color: red;
}

4.margin:auto 块的水平居中（标准写法为margin:0 auto;因为margin的top与bottom对设置auto没有效果）

原理为：auto默认是使用剩余空间，所以不论left还是right定义了auto，计算值都会是包含块的剩余空间，如果左右都设置了auto，那么就会均分剩余空间。

当然，这指的是书写模式为lr-tb的情况下，这种情况，宽度是一定的。

至于纵向，高度其实是没有一个固定值，auto无可refer的参照物，如果top或bottom设置了auto，那计算值其实会是0。

5.绝对定位（以父级为定位基准，设置绝对定位来垂直水平居中）

.big{
width:200px;height:200px; /*父级元素宽高设定 */
position:relative;
}
.small{
position:absolute;/*元素宽高任意 */
left:0;top:0;right:0;bottom:0;
margin:auto;

}

6.以FLEX的布局的方法居中，如下

.parent {
width:800px;height:500px;
border:2px solid;
display:flex;
justify-content:center;/*项目在主轴上居中 */
align-items:center;/*项目在交叉轴上居中*/
}
.child {
width:200px;height:200px;
background-color: red;

}

7.设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小，如下

.parent {
width:800px;height:500px;
border:2px solid;
position:relative;
}
.child {
width:300px;height:200px;
margin:auto;
position:absolute;

left:50%;top:50%;

margin-left: -150px;margin-top:-100px;/*自己宽高的一半*/
background-color: red;

｝

以下为大牛司徒正美总结的方法（还在理解中）：

hacks, hacks（小技巧）

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

translate(-50%,-50%)

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

参考文章：居中百分比宽高的元素

示例：

<style>
#container {

width:200px; height:200px;

background-color:yellow;

position:relative; }
#content { left:50%; top:50%;

transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);

background-color:gray; color:white; position:absolute; }
</style>
<div id="container"><div id="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">
<!-- 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;
}