CSS中关于元素居中的方法总结（超全）

css中一个很重要的问题，就是关于元素的居中，包括水平居中，垂直居中，本文就是为大家总结了：css中对于行内元素与块级元素不同的居中方法.

一、行内元素

水平居中：

垂直居中：

1. 单行文本

height 与line-height 的高度相同时，可以实现垂直居中

2. 多行文本

方法1：

注：vertical-align 作用单元格时，才生效，所以一般会结合dispaly:table-cell;

 一起使用才有效果

示例：

方法2：

样式重点分析：

1. 父级的标签，高度和行高一致

p{

   height: 200px;

   line-height: 200px;

  border: 1px solid red;

   font-size: 16px;

}

2. 子标签, 设置为行内块级元素，垂直居中，且单独设置行高

注：line-hight:1 ; 这里的1指与父级的字体大小相同，你可以可以直接写具体的px

p span{

       display: inline-block;

       line-height: 1;

}

二、块级元素

1. 水平居中

方法1：常规方法 - 定宽元素

此方法缺点：内层元素必须设定（固定）宽度

方法2：不定宽元素 - 绝对定位

思路：

1.外层绝对定位，内层相对定位，外层的外层相对定位 

2.外层左浮动，内层左浮动

3.外层右移50%，内层左移50%

此方法有left:50%, 在margin-left:负的宽度的一半，只是宽度不确定，所以就采用了position:relative; , right:50%; 而right：50%，其实就是向左移动宽度的一半，这里的百分比是以父级的宽度计算的

2. 垂直居中

方法1：

设置父元素相对定位，子元素position: absolute;top: 50%;同时margin-top值为-(子元素高度的一半)，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现。IE版本都可以兼容

代码如下：

方法2：

和上一种方法原理差不多，都是利用相对定位和绝对定位，有点不同是子元素内加上了transform:translateY(-50%);

方法3：

设置父元素为相对定位，子元素为绝对定位，同时设置子元素的top,bottom,left,right值为0，最后设置margin:auto;这能实现块元素的垂直+水平居中，看代码：

总结

还可以通过flex来实现，水平居中和垂直，因为比较简单本文就没有介绍.

参考文章：

https://www.cnblogs.com/goloving/p/7657544.html

https://blog.csdn.net/zhang_yu_ling/article/details/90272623

https://blog.csdn.net/Simon9124/article/details/78935788

苟有恒 , 何必三更眠五更起

关注我，一起学习吧