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

苟有恒 , 何必三更眠五更起
关注我,一起学习吧