CSS垂直居中
transform: translateY(-50%)
1)使用top: 50%
使得元素上边界偏移至页面竖直方向上的中心线
2)使用position: relative
使得实际展示的元素相对于本身位置进行偏移
3)使用transform: translateY(-50%)
使得实际展示的元素向上移动自身高度的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
}
.content{
width: 300px;
height: 300px;
background: orange;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
flex
1)外层使用display:flex
2)外层使用flex-direction: column
指定排布为竖直方向
3)外层使用justify-content: center
表示内部元素向中间对齐
4)内部元素的height需小于外部元素的height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
.child {
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
<br>
<div class="child"></div>
</div>
</body>
</html>
position: absolute + margin: -50px 0 0 0;
1)外层元素position: relative|absolute|fixed
(若外层元素position: static
,子元素无法使用父级元素定位)
2)内层元素position: absolute
绝对定位,根据首个position不为static的祖先类进行定位
3)top: 50%
:内层元素的上边界距离祖先类的上边界为祖先类高度的50%
4)margin: -50px 0 0 0;
50px = child.height/2 使得内层元素再上移自身高度的一半,使得内层元素与外层元素的垂直中心线重合
兼容性较好,但是需要知道子元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
position:absolute + margin:auto
1)外层元素position: relative|absolute|fixed
(若外层元素position: static
,子元素无法使用父级元素定位)
2)内层元素position: absolute
绝对定位,根据首个position不为static的祖先类进行定位,即父类box
3)top: 0; bottom: 0;
规定子元素盒模型的position上下距离相等
4)margin: auto
自动设置子元素margin,使得子元素盒模型外边距margin和父元素盒模型内容content的距离为top和bottom设定的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child {
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
line-height 垂直居中单行文本
1)line-height= 300px;
设置文本的显示高度。范围为content从上至下300px
2)对于子元素,设置vertical-align: middle;
,即文本显示范围内向中间对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}
.box div {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div>balabala</div>
</div>
</body>
</html>
display:table + vertical-aline:middle
1)父元素display: table;
设置展示模式为表格
2)子元素display: table-cell;
作为父元素表格的一个单元格
3)子元素vertical-align: middle;
表示单元格内容对齐方式为居中对齐
vertical-align属性只对拥有valign特性的html元素起作用,例如表格元素中的等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<div class="child">balabala</div>
</div>
</body>
</html>