元素垂直居中的几种方法:
方法一:设置height和line-height
在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子:
Document
div {
width: 300px;
height: 200px;
border: 1px solid red;
}
span {
line-height: 200px;
}
文本垂直居中原理
方法二:display:table-cell和vertical-align
组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。这在子元素不确定宽高和数量时,特别实用!
Demo001_displayTable
/*** table-cell middle center组合使用 ***/
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
我爱你
我爱你
亲爱的中国
我爱你
亲爱的中国
div(inline-block)
方法三:display:flex;
以前div内部的文字垂直居中,使用height = line-height,现在可以使用display:flex来实现了
.div{
display:flex;
align-items:center;
}
使用div类,不仅可以实现div内部的文字居中,还可以使内部的div也垂直居中.
body{margin: 0; padding: 0 ;}
.header,.footer{height: 100px;background-color:#ccc;}
.cc{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #ccc;
min-height: calc(100vh - 200px);
}
by lpycontentby lpy
方法四:display:-webkit-box
这种方法,在 content 元素外插入一个 div。设置此 divheight:50%; margin-bottom:-contentheight;。
content 清除浮动,并显示在中间。
.floater {
float:left;
height:50%;
margin-bottom:-120px;
}
.content {
clear:both;
height:240px;
position:relative;
}
Content here
方法五:相对定位和绝对定位
利用给父元素设置相对定位,子元素设置绝对定位、margin: auto 0;和top: 0; bottom: 0;实现垂直居中;
原理:因为auto关键词默认自动分配剩余空间,宽度相对window是固定的,所以margin: 0 auto;可以有水平居中的效果,而高度相对window并不是固定的,所以margin: auto 0;不能垂直居中,所以让子元素的上下margin值不相对于window进行计算,改为相对父元素进行计算即可让margin: auto 0;生效;
#outer{
position: relative;
}
#inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}