7种CSS实现垂直居中的方法总结

忽然发现自己已经有段时间没有好好的复习下CSS布局了，有点惭愧啊~于是打算总结一下关于CSS垂直居中的7种方法。

设定行高(line-height)
在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。这种方式适用于单行的“行内元素”。将line-height设成和父容器高度一样的数值，内容中的行内元素就会垂直居中。因为是行高，会在行内元素的上下加上行高的1/2，所以就会垂直居中。想要文本水平居中设置text-align：center即可。

html:    <div class="main"><span class="content">Hello Febby</span></div>
css:.main{width:150px;height:150px;margin:50px;border:1px solid red;}.content{width:150px;line-height: 150px;text-align: center;display: inline-block;}

2. 通过伪元素:before实现CSS垂直居中。
如果想要让多行元素都能垂直居中，则需要用到伪元素。顺便复习一下vertical-align属性的用法，vertical-align属性是指元素内的所有元素垂直位置互相垂直，而不是相对于外框高度垂直居中。vertical-align这个是设置元素的垂直排列的.用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐。这时我们可以利用伪元素::before添加一个div，让这个伪div的高度达到100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

html:<div class="main"><div class="left"></div><div class="middle"></div><div class="right"></div></div>css:.main{width:200px;height: 200px;margin:50px;letter-spacing: -10px; /*属性的值为一个负值，解决inline和inline-block元素的默认间距 */border:1px solid red;}.main::before{content:'';width:0;height:100%;vertical-align: middle;display: inline-block;}.left{width:50px;height: 80px;vertical-align: middle;background:red;display: inline-block;}.middle{width:50px;height: 100px;vertical-align: middle;background:blue;display: inline-block;}.right{width:50px;height: 150px;vertical-align: middle;background:green;display: inline-block;}

3.已知父元素高度通过transform实现CSS垂直居中。
可以利用transform这个css3属性，这时子元素需要相对定位position:relative（相对于其正常（原先本身）位置进行定位），同时搭配bottom这个属性使用，再通过translateY即可定位到垂直居中的位置。想要子元素水平居中，可以搭配left属性，再通过translateX即可定位到水平居中的位置。

html:<div class="main"><div class="box"></div></div>
css:.main{width:200px;height: 200px;margin:50px;border:1px solid red;}.box{width:80px;height: 80px;position: relative;left:50%;bottom:50%;transform:translateX(-50%) translateY(-50%);background:red;}

4. 绝对定位
绝对定位position:absolute,要注意的是设定绝对定位的子元素其父元素position要指定为relative,将上下左右的数值都设置为0，同时margin:auto，但绝对定位会脱离正常文档流，会相互覆盖，如果内容较多是可能会出现布局问题。

html:<div class="main"><div class="box1"></div></div>
css:.main{width:200px;height: 200px;margin:50px;position: relative;border:1px solid red;}.box1{width:80px;height: 80px;position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;background:red;}

通过display:flex实现CSS垂直居中。
通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center。

html:<div class="main"><div class="box2"></div></div>
css:.main{width:200px;height: 200px;margin:50px;display:flex;border:1px solid red;}.box2{width:80px;height: 80px;align-self: center;background:red;}

6. calc动态计算
当div的display属性只能是block时，我们可以用到css的calc动态计算，让居中的div的top属性为上方距离是50%的外框高度-50%的居中div高度，即top:calc(50%外框高度-50%居中div高度)。其中父元素position定位为relative，子元素position定位为absolute。水平居中同理。

html:<div class="main"><div class="box3"></div></div>
css:.main{width:200px;height: 200px;margin:50px;position:relative;border:1px solid red;}.box3{width:80px;height: 80px;position:absolute;top:calc(50% - 40px); /*垂直居中 */left:calc(50% - 40px); /*水平居中 */background:red;}

7. 通过display:table-cell实现CSS垂直居中。
组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中。
可以将父元素设置display:table，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。

html:<div class="main"><p class="box4">Hello Febby</p></div>
css:.main{width:200px;height:200px;margin:50px;border:1px solid red;display: table;}.box4{background:red;display: table-cell;vertical-align: middle;text-align: center;}

以上就是7种CSS实现垂直居中的方法总结，希望可以帮到大家！后续还会继续补充~

7种CSS实现垂直居中的方法总结相关推荐

16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
CSS实现垂直居中的方法
CSS实现垂直居中的方法 1.relative absolute定位: (1)css html代码 1 <!doctype html> 2 <html lang="en&q ...
div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...
Absolute 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...
html图片做成菱形,两种css实现菱形的方法以及拓展特效
提到用css实现菱形,在我看来有两种比较便利而且兼容性不错的方法,实现的方式也都不难,但是简单的方法其实也可以做出一些眼前一亮的特效,后面会为大家介绍,下面先来说说两种实现菱形的方式. 方法一:bor ...
CSS水平垂直居中常见方法总结(转）
文章目录一.简介二.元素水平居中三.元素水平垂直居中 3.1 position 元素已知宽度 3.2 position transform 元素未知宽度 3.3 flex布局 3.4 table ...

7种CSS实现垂直居中的方法总结

7种CSS实现垂直居中的方法总结相关推荐

最新文章

热门文章