css 居中方法

垂直居中

利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

 

.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: 20rem; }

未知高度的块级元素

.parent { position: relative; }

.child { position: absolute; top: 50%; transform: translateY(-50%); }

利用flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

parent { display: flex; justify-content: center; align-items: center; }