HTML 示例代码
// 行内元素 html代码
<div class="parent">
<span class="child">child</span>
</div>
// 块级元素 html代码
<div class="parent">
<div class="child">child</div>
</div>
水平居中
行内元素 text-align: center;
.parent {
text-align: center;
}
块级元素 margin:0 auto;
.parent {
margin:0 auto;
}
垂直居中
行内元素（单行文字垂直居中）：设置 line-height = height
.parent {
height: 200px;
line-height: 200px;
border: 1px solid red;
}
块级元素
1. 绝对定位 + -margin-top/-margin-left
缺点：需要提前知道子元素尺寸，margin-top: -(高度的一半); margin-left: -(宽度的一半);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style>
.parent {
position: relative;
height: 200px;
width: 200px;
background: #ccc;
}
.child {
width: 80px;
height: 40px;
background: #999;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
</style>
</head>
<body >
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
效果图
2. 绝对定位 +transform: translate(-50%, -50%);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
.parent {
position: relative;
height: 200px;
width: 200px;
background: #999;
}
.child {
width: 100px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #666;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
效果图
3. 绝对定位 + margin: auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
.parent {
position: relative;
height: 200px;
width: 200px;
background: #999;
}
.child {
width: 180px;
height: 140px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: #333;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
效果图
4.块级元素：display: flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
.parent {
width: 400px;
height: 200px;
border: 1px solid red;
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.child {
width: 200px;
height: 100px;
background: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
child1
</div>
</div>
</div>
</body>
</html>
效果图
5.伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
.parent {
width: 400px;
height: 200px;
border: 1px solid red;
text-align: center;
}
.child {
background: #ccc;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
.parent::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
child1
</div>
</div>
</div>
</body>
</html>
效果图
6.垂直居中inline-block + font-size: 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
.parent {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.child,
.brother {
display: inline-block;
vertical-align: middle;
}
.child {
background: #CCC;
font-size: 12px;
}
.brother {
height: 200px;
font-size: 0; // 隐藏元素
}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
<div class="brother">brother</div>
</div>
</div>
</body>
</html>
效果图
