HTML 水平居中 垂直居中 垂直水平居中的几种实现方式

一、水平居中

方法一：在父容器上定义固定宽度，margin值设成auto
效果如图所示
方法二：在子元素中将display设置为inline-block,父元素text-algin设置为center
效果如图所示

方法三、使用定位属性
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；

定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

效果：

不定宽度：利用css3新增属性transform: translateX(-50%);

方案四：使用flexbox布局实现（宽度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

二、垂直居中

方法一、单行的行内元素
只需要设置单行行内元素的"行高等于盒子的高"即可；

效果如下：
方法二 、多行的行内元素
使用给父元素设置display:table-cell;和vertical-align: middle;属即可；
效果如下：

三、水平垂直居中

已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
效果如下：
方案二：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

效果和上图一样