1. table
此方法兼容IE和老旧版本的手机浏览器
<table class='parent'>
<tr>
<td class='child'>child</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
border:7px solid black;
height:300px;
width:200px;
}
.child{
border:5px solid green;
background:#f60;
}
</style>
</head>
<body>
<table class='parent'>
<tr>
<td class='child'>child</td>
</tr>
</table>
</body>
</html>
2. div 模拟 table
此方法兼容IE和老旧版本的手机浏览器
vertical-align用来指定行内元素或表格单元格元素的垂直对齐方式
.parent {
display: table-cell;
vertical-align: middle;
}
.child {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent {
width: 200px;
height: 300px;
background: #f60;
display: table-cell;
border:7px solid black;
vertical-align: middle;
}
.child {
width:100px;
height:100px;
line-height:100px;
border:5px solid green;
display: block;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
3. flex布局
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
border:7px solid black;
height:300px;
width:200px;
display:flex;
justify-content:center;
align-items:center;
}
.child{
padding:34px 0;
width:100px;
border:5px solid green;
background:#f60;
text-align:center;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>child</div>
</div>
</body>
</html>
4. transform
transform中translate偏移的百分比是相对于元素自身的宽高
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent {
width: 200px;
height: 300px;
background: #f60;
border:7px solid black;
position: relative;
}
.child {
border:5px solid green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
5. 动态计算 calc
让居中 div 与上方的距离是“50%的外框高度 - 50%的div高度”，与左侧的距离是“50%的外框高度 - 50%的div宽度”
.child{
position:relative;
top:calc(50% - 50px);
margin-left:calc(50% - 50px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
border:7px solid black;
height:300px;
width:200px;
}
.child{
position:relative;
width:100px;
height:100px;
line-height:100px;
outline:5px solid green;
background:#f60;
text-align:center;
top:calc(50% - 50px);
margin-left:calc(50% - 50px);
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>child</div>
</div>
</body>
</html>
6. -margin
.parent{
position:relative;
}
.child{
position:absolute;
left: 50%;
top: 50%;
margin-left: -(1/2*width)px;
margin-top: -(1/2*height)px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
border:7px solid black;
height:300px;
width:200px;
position:relative;
}
.child{
position:absolute;
width:100px;
height:100px;
line-height:100px;
border:5px solid green;
background:#f60;
text-align:center;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>child</div>
</div>
</body>
</html>
7. margin:auto
需要设置居中 div 的宽高，否则会填充整个父元素
.parent{
position:relative;
}
.child{
position:absolute;
left: 0;
right:0;
bottom:0;
top: 0;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
border:7px solid black;
height:300px;
width:200px;
position:relative;
}
.child{
position:absolute;
width:100px;
height:100px;
line-height:100px;
border:5px solid green;
background:#f60;
text-align:center;
left: 0;
right:0;
bottom:0;
top: 0;
margin: auto;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>child</div>
</div>
</body>
</html>
8. inline-block + line-height
元素的
height和line-height相同时，其文本自动容垂直居中，必须对父元素设置行高
.parent{
line-height:300px;
}
.child{
line-height: initial;
vertical-align: middle;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
border:7px solid black;
line-height:300px;
width:200px;
text-align:center
}
.child{
padding:34px 0;
width:100px;
border:5px solid green;
background:#f60;
text-align:center;
line-height: initial; /* 重置 */
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>child</div>
</div>
</body>
</html>
9. 伪元素 + vertical-align
设置为行内元素，使居中
div和伪元素横向排列，设置伪元素高度撑起父元素，设置居中元素居中对齐伪元素，实现垂直居中
.parent::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.child{
display: inline-block;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.parent{
border:7px solid black;
height:300px;
width:200px;
text-align:center
}
.parent::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.child{
padding:34px 0;
width:100px;
border:5px solid green;
background:#f60;
text-align:center;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>child</div>
</div>
</body>
</html>
网友评论