1.使单行文本垂直居中显示。
line-height:父级的高度
2.使单行文本或行内元素水平居中显示。
text-align:center；
3.使块元素居中显示
1.给父元素相对定位，给子元素绝对定位：position:absolute;top:50%;left:50%;margin-top:-高度/2;margin-left:-宽度/2; （这种写法，当元素的宽高改变后药手动去修改）
2.给父元素相对定位，给子元素绝对定位：position:absolute;transform:translateX(-50%);translateY(-50%); （这个移动，在后期修改时，会造成一定的麻烦）
3..给父元素相对定位，给子元素绝对定位:position:absolute;top:0;left:0;right:0;bottom:0;margin:auto; （比较完美）
4.给父元素display:flex;给子元素margin:auto;（这种写法，父元素内不能再有其他子元素，不然都会居中）
5，给父级加display:flex；justify-content:center; (主轴对齐) align-items:center; （侧轴对齐）（这种写法，子元素会全部居中）
4.上面的方法是用定位，或者弹性盒来布局，下面是用vertical-align原理。
水平居中：margin:数值 auto;（简单直接）
垂直居中：
给父元素display:table-cell;vertical-align:middle;(这种方法，是把父元素的元素类型变为表格的单元格，弊端是父元素不能浮动，子元素可 以 浮动，样式给一个群组加，则会在一行显示，父元素的margin,padding失效，父元素的宽高用百分比表示无效)
html:
<div><p>ouiou</p><span></span></div>
css:
div{
200px;
height: 200px;
border: 1px solid red;
text-align: center;
}
p{
vertical-align: middle;
display: inline-block;
}
span{
display: inline-block;
0;
height: 100%;
vertical-align: middle;
}
vertical-align应用于行内元素以及table-cell元素，是依赖div内子元素最高的高来实现对某元素居中显示的，只需要建立一个新元素，给他加上display:inline-block,再把它的高设置为100%就可以了。