CSS居中指南

一、水平居中：
1.内联元素的水平居中：只需要包含在块级元素中，再设置块级元素text-align: center;
这种类型实用于： inline, inline-block, inline-table, inline-flex等
2.块级元素的水平居中：具有宽度的块元素，你可以设置margin-left和margin-right为auto即可；
3.多个块元素并排水平居中：把块元素设置display:inline-block，然后设置父元素text-align:center;
又或者设置父元素为flex-box；如display:flex;justify-content: center;
多个块元素的水平居中竖直排列方法同2。
二、垂直居中：
1.单行垂直居中： 设置padding-top=padding-bottom 或者 设置line-height=height即可
2.行内元素多行垂直居中：
①使用table，单元格中默认是vertical-align:middle;
②定义容器为display：table；子元素定义display:table-cell；vertical-align: middle;即可
③定义容器为flex-box；如下：
display: flex;
flex-direction: column;
justify-content: center;
前提是容器元素要定义确定的高度。
④如果以上方法都OUT了。那么还有一种方法：“ghost element”技术，在该技术中，将一个全高度的伪元素放置在容器中，并且文本与此垂直对齐。如下：
html:
<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
css:
div {width: 240px;height: 200px;margin: 20px;}
.ghost-center {position: relative;}
.ghost-center::before {
content: " ";display: inline-block;height: 100%;width: 1%;vertical-align: middle; }
.ghost-center p {
display: inline-block;vertical-align: middle; width: 190px;margin: 0;padding: 20px;background: black;}
3.块元素的垂直居中
①已知高度的情况，简单一点：
.parent {position: relative;}
.child {position: absolute;top: 50%;height: 100px;margin-top: -50px;/高度的一半/}
②不知道高度的情况
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
③如果没有兼容性的问题存在，还可以使用flexbox
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
三、水平垂直居中的三种常见形式
1.固定宽高
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.未知宽高的情况
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.能使用flexbox下的情况
.parent {
display: flex;
justify-content: center;
align-items: center;
}
来源：https://css-tricks.com/centering-css-complete-guide/