如何实现一个块级元素的水平垂直居中
1、利用 display:table-cell;属性来实现
display:table-cell;结合vertical-align: middle;使用实现垂直居中，margin:0 atuo;可以实现子元素的水平居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table-cell居中</title>
<style type="text/css">
.content{
border: 1px solid blue;
display: table;
margin: 50px auto;
}
.table{
height: 300px;
width: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
.box{
height: 150px;
width: 150px;
background: #109D71;
margin: 0 auto;
display: table;
}
.word{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<div class="table">
<div class="box">
<div class="word">
垂直水平居中
</div>
</div>
</div>
</div>
</body>
</html>
image.png
2、flex 弹性布局
详情查看https://www.runoob.com/w3cnote/flex-grammar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
.content {
width: 300px;
height: 300px;
margin: 50px;
border: 1px solid #109D71;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 150px;
height: 150px;
background-color: #109D71;
text-align: center;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
水平垂直居中
</div>
</div>
</body>
</html>
image.png
3、利用绝对定位，让元素脱离普通文档流，再结合margin：auto。
<!DOCTYPE html>
<head>
<title>absolute居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position:relative;
}
.box {
margin:auto;
width: 100px;
height: 100px;
background: #109D71;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
</div>
</div>
</body>
</html>
4、absolute+margin 通过计算元素宽高实现居中
让子元素居中时，margin必须要知道子元素的宽高，切忌不能用百分比。
<!DOCTYPE html>
<head>
<title>absolute+margin计算元素宽高判断居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
/* top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px; */
top: calc(50% - 50px);
left: calc(50% - 50px);
background: #109D71;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
</div>
</div>
</body>
</html>
5、absolute + translate ，通过translate将元素移动自身的50%,50%，实现水平垂直居中。
translate(-50%,-50%) 属性：向上（x轴）和左（y轴），移动自身长宽的 50%，使其居于中心位置。
top: 50%;left: 50%;：是以窗口左上角为原点，需要减掉自身宽高的一半，才能居中。
与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比。
<!DOCTYPE html>
<head>
<title>absolute+translate</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.content {
width: 300px;
height: 300px;
border: 1px solid #109D71;
position: relative;
}
.box {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/* 渐进增强 */
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #109D71;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
</div>
</div>
</body>
</html>
一个人至少拥有一个梦想，有一个理由去坚强。心若没有栖息的地方，到哪里都是在流浪。个人推荐用2、3方法，
flex布局法适合在局部使用。
绝对定位适合在全屏场景使用，比如弹框中。
