div水平垂直居中的四种方式-开发者知识库平台

div水平垂直居中的四种方式

div

1175

2023/9/4 16:46:23

栏目: 编程语言

有四种常见的方式可以实现div水平垂直居中：

.parent {
display: flex;
justify-content: center;
align-items: center;
}

使用绝对定位和transform属性：将父元素相对定位（position: relative），然后将子元素绝对定位（position: absolute），并使用top、bottom、left和right属性将子元素居中。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

使用表格布局：将父元素的display属性设置为table，然后将子元素的display属性设置为table-cell，并使用vertical-align属性将子元素垂直居中。

.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}

.parent {
display: grid;
justify-items: center;
align-items: center;
}

以上四种方式都可以实现div水平垂直居中，选择哪种方式取决于具体的布局需求和浏览器兼容性要求。

div水平垂直居中的四种方式