下文用到的例子html为:
<div class="parent"> <div class="child"> lorem </div> </div>
文章目录
单行固定高度
适用场景:
- 单行文本
- 定高
在父元素或子元素设置 line-height
等于父元素高度即可
.parent { height: 300px; text-align : center; } .child { /*注意实现垂直居中不能用百分比,因为百分比是相对字体大小而言的*/ line-height : 300px; }
单行高度不固定
适用场景:
- 父元素需要设置高度,但高度不固定,如百分比的高度
- 单行文本
以下为固定脚本,即一定要写的
.parent { vertical-align : middle; text-align : center; } .parent:after { display: inline-block; content: ''; height: 100%; width: 0; vertical-align : middle; }
这里是要根据情况来写的,但是父元素下的单行文本所在元素一定要是内联元素,所以要设置
.child { display: inline; }
这里的思路也很简单,用 after
伪类元素撑至父元素高度,但是没文本,宽度也为0,但是它设置了 vertical:middle
,那么就会是父元素下的文本与这个伪类元素垂直对齐。
padding设置
适用:
- 父元素没设定高度
- 可多行文本
这个实在很简单,父元素设定相同的padding-top,bottom即可
绝对定位垂直水平居中
适用场景:
- 居中内容需要知道宽高(非定高定宽)
- gt IE 7
.parent { position: relative; width: 300px; height: 300px; } .child { position: absolute; /*必须*/ top: 0; /*必须*/ bottom: 0; /*必须*/ left: 0; /*必须*/ right: 0; /*必须*/ width: 50 %; /*定制*/ height: 30 %; /*定制*/ margin: auto; /*必须*/ }
绝对定位计算垂直水平居中
前提:
- 居中的内容需要知道宽高(非定高定宽)
.parent { position: relative; width: 300px; height: 300px; } .child { position: absolute; top: 50 %; left: 50 %; width: 100px; height: 200px; /*设置为本身宽度的一半*/ margin - left : - 50px; /*设置为本身高度的一半*/ margin - top : - 100px; }
display table法
适用场景:
- 可多行文本居中
- 居中内容一定要裹个标签用来设置
table-cell
.parent { display: table; text-align : center; } .child { display: inline - block; /** 这行主要为了应对IE7及以下不支持**/ display: table-cell; vertical-align : middle; }
flex方法
适用场景:
- 现代浏览器,IE10需要加前缀,IE11支持性不太好
- 可多行内容
.parent { display: flex; justify-content : center; align-items : center; }
transform方法
适用场景:
- 现代浏览器,IE9需要加前缀
.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
说明:
- 绝对定位是相对于父元素的百分比计算
- transform是相对于内容自身的宽高计算
float方法
适用:
- 父元素有设定高度
- 居中内容有设定高度
- 居中内容铺满child容器或溢出滚动时,更适用于图片或超多文本
.parent { height: 200px; } .parent:before { float: left; height: 50%; width: 100%; margin-bottom : -50px; /**为child的高度一半**/ } .child { clear: both; height: 100px; }
原文出处:微信公众号【pekon K前端】
原文链接:https://mp.weixin.qq.com/s/HGH7-t97zvYMFY41FtSS-A
本文观点不代表Dotnet9立场,转载请联系原作者。