本文给大家带来的内容是关于div标签：水平居中和垂直居中的实现，具有一定的参考价值。 有需要的同学可以参考一下。 希望对您有所帮助。
在后端开发中，我们经常会遇到需要居中的情况。 居中有两种html表格垂直居中，一种是水平居中，一种是垂直居中。 让我们总结一下所使用的技术。
水平居中
margin：0 auto
登录复制
auto表示外侧距离与左右距离相同，达到水平居中的效果
垂直居中
1.最常用的方法之一是根据偏移量来实现
*{margin: 0;padding: 0;}
.content{
position: relative;
width: 300px;
height: 300px;
background-color: #000;
margin: 300px auto;
}
.beat{
width: 100px;
height: 100px;
background-color: #ff0000;
position: absolute;
left:50%;
top:50%;
margin-top: -50px;
margin-left: -50px;
}
登录复制
红色小方块位于黑色方块的中心，实现垂直居中的效果
left和top分别设置为50%，红色小方块的起点位于垂直中心位置。 效果如下：
要实现小方块内部中心点垂直居中html表格垂直居中，必须加上偏移量。 margin-top的值为绿色框的高度/2，margin-left的值为绿色框的宽度/2。
2.让p块中的多行文本垂直居中，可以使用table和table-cell来实现
*{margin: 0;padding: 0;}
.content{
width: 300px;
height: 300px;
background-color: #000;
margin: 300px auto;
color: #fff;
display: table;
text-align: center;
}
.content p{
display: table-cell;
height: 100px;
vertical-align: middle;
}
垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分
常见的效果之一垂直居中是布局中十分常见的效果之一
登录复制
display: table使粉状元素成为块级表格，display: table-cell； 子元素设置为表格单元格，vertical-align: middle； 使表格内容居中，可以达到垂直居中的效果
