HTML+CSS元素水平垂直居中的几种方法

介绍几种常用的html元素水平垂直居中的方法

一、 使用弹性布局

给需要居中的元素的父元素设置display:flex；然后设置对齐方式为center，需要注意的是父元素要设置高度，具体代码如下：

二、 使用绝对定位

给需要居中的元素添加 position:absolute；属性设置四周距离为0，margin:auto; 代码如下：

三、使用绝对定位

给需要居中的元素添加 position:absolute；设置left和top为50%，设置margin-left 和 margin-top为负元素宽高的一半，即-50px;代码如下：

四、使用CSS 2D转换的 translate

首先设置需要居中的元素的定位为 absolute 然后设置 left:50%;top50%;
再设置位移自身的-50%，原理同上，代码如下：

五、使用vertical-align: middle；

给需要居中的元素设置 display: inline-block;vertical-align: middle然后在剧中元素前面或者后面增加一个span标签,设置span标签高度为100%，宽度为0，display: inline-block; 和vertical-align: middle； 要注意的是 需要给父元素设置高度 和 text-align: center;(div设置为内联块元素后可以使用文字水平居中)。这样的方法同样适用于img标签的水平垂直居中，具体代码如下：