让一个容器水平垂直居中有多种方法，下面介绍简单的几种：
方法一：position加margin
先上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS——如何让一个容器水平垂直居中</title>
<style>
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
运行如下：
首先设置父容器布局方式为相对布局：
position:relative;其次设计子容器的布局方式为绝对布局：position:absolute;margin值设置为自适应：margin:auto；
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
margin:auto;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
看似还没有任何变化，关键来了，当设置left:0;right:0;时容器会水平居中：
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
margin:auto;
left:0;
right:0;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
当设置left:0;right:0;top:0;bottom:0;容器自然就水平垂直居中了；
当知道容器高度时，还可以设置top:50%;margin-top:-100px;使其垂直居中；
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
因为当设置top:50%;时，子容器会向下偏移父容器高度的50%； 
在设置margin-top:-100px;子容器向上偏移该容器高度的一半，正好垂直居中。
同理当设置left:50%;时，子容器会向右偏移父容器宽度的50%；
在设置margin-left:-100px;子容器向左偏移该容器宽度的一半，正好水平居中。
该方法适用于所有浏览器
方法二： diaplay:table-cell
<style>
.div1{
width: 200px;
height: 200px;
background: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.div2{
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
display: table-cell;让标签元素以表格单元格的形式呈现；
vertical-align: middle;让内容垂直居中（需在在表单元格中）；
text-align: center;让内容水平居中；
display: inline-block;将对象呈递为内联对象，但是对象的内容作为块对象呈递；
方法三：position加 transform
<style>
.div1{
position: relative;
background: yellow;
width: 200px;
height: 200px;
}
.div2{
position: absolute;
background: green;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
首先设置top:50%;left:50%;让子容器向下、向右偏移父容器高宽的一半； 
然后设置transform:translate(-50%,-50%);让子容器向X、Y轴左上偏移子容器的一半宽高，这样正好居中；
兼容性：ie9以下不支持 transform，手机端表现的比较好。
方法四：display:flex;弹性布局
<style>
.div1{
background: yellow;
width: 200px;
height: 200px;
display: flex;
}
.div2{
background: green;
width: 100px;
height: 100px;
margin: auto;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
display:flex;设置弹性布局;
也可以这样写：
.div1{
background: yellow;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.div2{
background: green;
width: 100px;
height: 100px;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
align-items: center;设置水平居中；
align-items: center; 设置垂直居中；
移动端首选
总结：
如果是移动端，使用display:flex;弹性布局会比较方便；
如果pc端，考虑浏览器兼容问题，可以使用position布局；
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
让一个容器水平垂直居中有多种方法，下面介绍简单的几种：
方法一：position加margin
先上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS——如何让一个容器水平垂直居中</title>
<style>
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
运行如下：
首先设置父容器布局方式为相对布局：
position:relative;其次设计子容器的布局方式为绝对布局：position:absolute;margin值设置为自适应：margin:auto；
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
margin:auto;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
看似还没有任何变化，关键来了，当设置left:0;right:0;时容器会水平居中：
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
margin:auto;
left:0;
right:0;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
当设置left:0;right:0;top:0;bottom:0;容器自然就水平垂直居中了；
当知道容器高度时，还可以设置top:50%;margin-top:-100px;使其垂直居中；
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
因为当设置top:50%;时，子容器会向下偏移父容器高度的50%；
在设置margin-top:-100px;子容器向上偏移该容器高度的一半，正好垂直居中。
同理当设置left:50%;时，子容器会向右偏移父容器宽度的50%；
在设置margin-left:-100px;子容器向左偏移该容器宽度的一半，正好水平居中。
该方法适用于所有浏览器
方法二： diaplay:table-cell
<style>
.div1{
width: 200px;
height: 200px;
background: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.div2{
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
display: table-cell;让标签元素以表格单元格的形式呈现；
vertical-align: middle;让内容垂直居中（需在在表单元格中）；
text-align: center;让内容水平居中；
display: inline-block;将对象呈递为内联对象，但是对象的内容作为块对象呈递；
方法三：position加 transform
<style>
.div1{
position: relative;
background: yellow;
width: 200px;
height: 200px;
}
.div2{
position: absolute;
background: green;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
首先设置top:50%;left:50%;让子容器向下、向右偏移父容器高宽的一半；
然后设置transform:translate(-50%,-50%);让子容器向X、Y轴左上偏移子容器的一半宽高，这样正好居中；
兼容性：ie9以下不支持 transform，手机端表现的比较好。
方法四：display:flex;弹性布局
<style>
.div1{
background: yellow;
width: 200px;
height: 200px;
display: flex;
}
.div2{
background: green;
width: 100px;
height: 100px;
margin: auto;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
display:flex;设置弹性布局;
也可以这样写：
.div1{
background: yellow;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.div2{
background: green;
width: 100px;
height: 100px;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
align-items: center;设置水平居中；
align-items: center; 设置垂直居中；
移动端首选
总结：
如果是移动端，使用display:flex;弹性布局会比较方便；
如果pc端，考虑浏览器兼容问题，可以使用position布局；
.div1{
width:400px;
height:400px;
position:relative;
background:#eee;
}
.div2{
width:200px;
height:200px;
position:absolute;
background:#f00;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16