2024年5月11日发(作者：)

div水平垂直居中的三种方法

（实用版4篇）

编制人:_______________

审核人:_______________

审批人:_______________

编制单位:_______________

编制时间:_______________

序 言

本店铺为大家精心编写了4篇《div水平垂直居中的三种方法》，供大家借

鉴与参考。下载后，可根据实际需要进行调整和使用，希望能够帮助到大家，谢

射!

div水平垂直居中的三种方法

（4篇）

《div水平垂直居中的三种方法》篇1

div元素可以通过CSS的定位属性和Flexbox来实现水平垂直居中，以下是

三种实现方式：

1. 使用flexbox：

```css

.container {

display: flex;

justify-content: center; /*水平居中*/

align-items: center; /*垂直居中*/

}

```

2. 使用position和transform：

```css

.container {

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

```

3. 使用table-cell和vertical-align：