关于居中，因为使用率非常高，所以之前学习过程中就有总结，但是觉得现在由于经验的增加，可能更有些体会，故重新整理，以备后查！
不废话，上代码系列（所有案例都以HTML为基准）
HTML
<body>
<div class="box-all">
<div class="box1">块级元素水平垂直居中</div>
</div>
</body>
基准css
.box-all{
border: 1px solid green;
width: 800px;
height: 800px;
margin: 0 auto;
}
.box1{
width: 300px;
height: 300px;
border: 1px solid red;
}
方法一：table-cell法
.box-all{
display: table-cell;
vertical-align: middle;
}
.box1{
margin: 0 auto;
}
方法二：定位浮动法（已知宽高）
.box-all{
position: relative;
}
.box1{
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
方法三：定位浮动法（未知宽高）
.box-all{
position: static;
}
.box1{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
方法四：十面埋零
.box-all{
position: relative;
}
.box1{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin:auto;
}
方法五：纯html实现（table自带功能）
HTML：
<table>
<tr>
<div class="box-all">
<div class="box1"></div>
</div>
</tr>
</table>
方法六：
.box-all{
display:flex;
justify-content: center;
align-items:center;
}
基本点：
块级元素水平居中：
margin : 0 auto;
行内元素水平居中：
text-align : center;
网友评论