HTML元素居中的常用方法

行内元素居中

平水居中

给上级元素添加text-align:center；

垂直居中

给上级元素添加line-height:（height）;

块级元素居中

设置外边距

给当前元素添加margin:0 ,auto;

利用弹性布局实现

在上级元素中添加display: flex;align-items: center;

PS
弹性盒子(Flexible Box)，简称Flex，用来为盒装模型提供最大的灵活性。添加Flex布局以后，子元素的float、clear和vertical-align属性将失效。

使用定位

设置父元素相对定位子元素position: absolute;top: 50%;
同时margin-top：(0.5倍height)；