css常见垂直居中方法（面试常考）
2020-03-29 本文已影响0人
solfKwolf
- table-cell
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
#wrapper {
display: table;
}
#cell {
display: table-cell;
vertical-align: middle;
}
或者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrapper {
/* display: table; */
background: aqua;
}
#cell {
display: table-cell;
min-height: 500px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
</body>
</html>
2 position absolute
下面这种必须固定高度
div class="content"> Content goes here</div>
#content {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px; /* negative half of the height */
}
优点：
适用于所有浏览器
不需要嵌套标签
缺点：
没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
或者使用tansform好点，无需计算高度
#content {
position: absolute;
top: 50%;
height: 240px;
transfrom: translateY(-50%); // 本质
}
position：absolute
必须固定宽高，垂直水平居中
<div id="content"> Content here</div>
#content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
flex
<div class="content">
<div class="item"></div>
</div>
.content {
display: flex;
align-teim: center;
}
文本垂直居中
<div class="content">
<div class="item"></div>
</div>
.content {
height:
}
