CSS 居中小结

简单地整理一些css居中的方法。

text-align:center：

这种方法可以让** inline/inline-block/inline-table/inline/flex**等类型的元素实现 水平居中。

line-height:

将line-height与padding两个值配合可以实现文字的 垂直居中。不建议写死height居中的方法。

margin-left:auto; margin-right:auto;

这种方法可以实现块级元素的 水平居中。但必须先设置元素适当的width值，否则块级元素会默认拉伸为父级元素的宽度导致居中无效。通常情况下多见简写成 **margin:0 auto; **在很多情况下的确可行，但在某些情况下，”margin:0 auto“由于设置了上下margin为0，可能会导致某些定位上的困扰难以发现，所以并不建议。

绝对定位居中:

父容器元素：position: relative，
子容器元素：｛
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
这样可以实现子元素相对于父元素的绝对定位居中，需要注定的是，height是必须定义的，另外建议加 overflow: auto，防止内容溢出。

视口居中：

父容器元素： position: relative
内容元素：position: fixed，z-index: 999，例子：
.class1 {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}

响应式居中：

百分比宽高，最大、最小宽度均可以，加 padding 也可以：
.class1 {
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;
}

flexbox:

父级容器为 display: flex,
.flex1{
display: flex;
justify-content: center;
align-items:center;
}
对于父级元素来说，它的所有子元素都是垂直居中的，这种方法最简便，建议使用。