1. 水平居中
1.1 行内元素
text-align: center;
1.2 块级元素
margin: 0 auto;
这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。
他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。
1.3 多于一个块级元素：
1.3.1 子元素设置为inline-block类型，同时父元素设置属性text-align: center;
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
1.3.2 使用flex box
// 父元素
flex-center {
display: flex;
justify-content: center;
}
2.垂直居中
2.1 行内元素
2.1.1 单行行内元素
可以设置padding-top，padding-bottom
如果无法使用padding属性，则将height和line-height设为相等也可以垂直居中。
2.1.2 多行行内元素
1）、可以将元素转为table样式，再设置vertical-align：middle;
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
2）、使用flex布局
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
这里要注意！！flex布局要求父元素必须显示设置height
3）、在容器中放置伪元素
使用vertical-align使文本垂直对齐该伪元素。
<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
2.2 块级元素
2.2.1 已知高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
/* account for padding and border if not using box-sizing: border-box; */
}
2.2.2 元素是未知高度
1）、
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2）、用flex布局
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
3. 垂直和水平居中
3.1 固定大小元素
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去，写上子元素的height和width，这个似乎是必须的，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数；margin-left:一半的width值的负数。整理一下之后，可能你会给你的子元素写上这样的css（当然，父元素也要先写上width和height）
3.2 未知大小元素
如果当前元素大小未知，可以使用translate将元素在x和y两个方向反向偏移自身的50%的大小，使其居中显示
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.3 使用flex居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
3.4 grid居中
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}
