CSS实现元素水平垂直居中，是页面布局中最常见的编程技巧。
1.绝对定位 + margin
缺点：必须要求指定子元素的宽高。如果子元素的宽高会随着内容发生变化，则以下两种方法都不能使用（不推荐使用）
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 20px auto;
}
#main {
width: 80%;
height: 400px;
margin: 20px auto;
outline: 2px solid lightskyblue;
position: relative;
}
/*方式一：绝对定位 + margin;缺点：必须要求指定子元素的宽高*/
/*position:absolute + margin: auto;*/
#container {
width: 800px;
height: 360px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
outline: 2px solid lightpink;
}
</style>
</head>
<body>
<h1>盒子模型水平垂直居中</h1>
<hr>
<div id="main">
<div id="container">
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
</div>
</div>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 20px auto;
}
#main {
width: 80%;
height: 400px;
margin: 20px auto;
outline: 2px solid lightskyblue;
position: relative;
}
/*方式一：绝对定位 + margin;缺点：必须要求指定子元素的宽高*/
/*position:absolute + margin: auto;*/
#container {
width: 800px;
height: 360px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px; /*margin-left:-自身宽度一半 ; */
margin-top: -180px; /*margin-top:-自身高度一半 ; */
outline: 1px solid lightpink;
}
</style>
</head>
<body>
<h1>盒子模型水平垂直居中</h1>
<hr>
<div id="main">
<div id="container">
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
</div>
</div>
</body>
</html>
2.绝对定位 + translate
这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。因为 translate() 中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，是动态计算宽和高。（推荐使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 20px auto;
}
#main {
width: 80%;
height: 400px;
margin: 20px auto;
outline: 2px solid lightskyblue;
position: relative;
}
/*方式二：绝对定位 + translate*/
#container {
/*注意：这里没有指定子元素的宽度和高度*/
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
outline: 2px solid lightpink;
}
</style>
</head>
<body>
<h1>盒子模型水平垂直居中</h1>
<hr>
<div id="main">
<div id="container">
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
</div>
</div>
</body>
</html>
3.flex 弹性盒子
弹性盒子布局兼容性很好，推荐使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 20px auto;
}
#main {
width: 80%;
height: 400px;
margin: 20px auto;
outline: 2px solid lightskyblue;
position: relative;
display: flex; /*父容器使用弹性盒子布局*/
}
/*方式三：flex 弹性盒子*/
#container {
/*注意：这里没有指定子元素的宽度和高度*/
margin: auto;
outline: 2px solid lightpink;
}
</style>
</head>
<body>
<h1>盒子模型水平垂直居中</h1>
<hr>
<div id="main">
<div id="container">
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
</div>
</div>
</body>
</html>
4.table-cell 布局
display: table-cell;指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 不过会被float, position: absolute等属性破坏效果，应避免同时使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 20px auto;
}
#table{
display: table;
text-align: center;
width: 960px;
height: 400px;
margin: 20px auto;
}
#main {
outline: 2px solid lightskyblue;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/*方式四：table-cell 布局*/
#container {
/*注意：这里没有指定子元素的宽度和高度*/
display: inline-block;
outline: 2px solid lightpink;
}
</style>
</head>
<body>
<h1>盒子模型水平垂直居中</h1>
<hr>
<div id="table">
<div id="main">
<div id="container">
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
这里是container内容<br>
</div>
</div>
</div>
</body>
</html>