html元素水平垂直居中几种方法的归纳

前言

说来惭愧，因为之前不成系统的学习，我对于元素如何水平垂直居中的这个问题一直都是通过不断的用各种属性去试的方式来解决，最后才牵强得出一个大致让我满意的结果，然后到了下次又需要用到这个效果的时候又要再次重复一遍那个试的过程，其原因就是我真对此类问题没有一个系统化的解决方案，说白了就是我脑子里对于此的知识很凌乱。因此，对于我来说，我觉得有必要做一个大致的归纳来好好整理一下元素如何水平垂直居中这一问题。

1、内容水平居中

在需要水平居中的内容标签的父级添加属性:

text-align:center;

何为内容标签?
就是如span、a、input、img等等之类的标签，理论上浏览器对行内元素和行内块元素都是以文本的形式处理。

2、内容垂直居中

在父级元素添加或在需要使元素本身的文本垂直居中的元素属性中添加：

height:50px;
line-height:50px;

他的原理就是设置元素的行高等于元素本身的高度，就是上下边距相等，所以可以达到文本垂直居中的效果。

3、标签水平居中

对需要水平居中的块级元素本身添加

margin:0 auto;

常用的块级元素有div、p、h

要注意的是：
使用此方法的前提是要为元素本身设置一个固定的宽度，不然本元素的宽度会充满整个父级元素。

因为他的工作原理就是父级宽度减去自身所占的宽度然后就得到剩余空间，这个所剩空间然后再平均分配给左右边距，因此到达居中效果。

一般是在开发pc端网页设置一个水平居中的版心的时候会用到。

4、使用position定位使元素居中

给任意需要居中的元素添加：

div{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    /* 退宽度和高度的一半 */
    transform:translate(-50%,-50%);
}

此方法的使用场景应该是比较少的，要注意的是若子元素使用了absolute绝对定位，那么就要为你的父级元素设置一个相对定位，否则使用此方法的元素会在你的浏览器中央居中

5、图片垂直居中

在img标签添加属性:

vertical-align:middle;

其原理是改变行内元素和行内块元素基线对齐方式，使图片和文本能在中心基线对齐。

6、flex布局居中

此方法在开发中应该是较为常用的，当然有一点就是他对IE浏览器不兼容（赶紧抛弃万恶的ie吧）

对需要居中元素的父级添加：

水平居中

display: flex;
justify-content: center;

垂直居中

display: flex;
align-items: center;

垂直水平居中只需要两个同时使用即可

display: flex;
justify-content: center;
align-items: center;

前言