css实现水平垂直居中的几种方法

2024年2月8日发(作者：)

css实现水平垂直居中的几种方法

CSS是网页设计中必不可少的语言之一，实现水平垂直居中是网页设计中比较常见的需求之一。下面介绍几种实现水平垂直居中的方法。

方法一：使用flexbox布局

使用flexbox布局是最简单的方法之一。只需要给父元素添加display:flex;和justify-content:center;align-items:center;即可实现水平垂直居中。

方法二：使用绝对定位

使用绝对定位也可以实现水平垂直居中。给父元素添加position:relative;，子元素添加position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);即可实现水平垂直居中。

方法三：使用table-cell

使用table-cell布局也可以实现水平垂直居中。给父元素添加display:table-cell;vertical-align:middle;text-align:center;，子元素添加display:inline-block;即可实现水平垂直居中。

方法四：使用grid布局

使用grid布局也可以实现水平垂直居中。给父元素添加display:grid;和place-items:center;即可实现水平垂直居中。

以上是几种实现水平垂直居中的方法，可以根据不同的情况选择适合的方法。

- 1 -

- 2 -