div水平居中和垂直居中

时间：2023-04-02 18:41:15 HTML

在前端开发中，我们经常会遇到需要居中的情况。居中有两种，一种是水平居中，一种是垂直居中。让我们总结一下使用的方法。水平居中实现margin:0autoauto表示左右边距相同，实现水平居中的效果垂直居中实现1.最常用的方法是实现

红色方块位于黑色方块的中心，实现垂直居中效果。左侧和顶部分别设置为50%。红色方块的起点在垂直居中位置。效果如下图：我想实现正方形Center里面的中心点垂直，加上一个偏移量。margin-top的值为红框高度/2，margin-left的值为红框宽度/2。2.让div块中的多行文字垂直居中，可以使用table和table-cell来实现

垂直居中是布局中非常常见的效果之一垂直居中是布局中非常常见的效果之一垂直居中是布局中非常常见的效果之一垂直居中是布局中很常见的效果之一

display:table使块元素成为块级表格，display:table-cell;子元素设置为表格单元格，vertical-align:middle;使表格的内容居中显示，即可达到垂直居中的效果