CSS中,垂直居中的九种写法

发布网友发布时间：2024-09-15 07:28

共1个回答

热心网友时间：2024-10-23 12:46

在CSS中实现垂直居中，有九种不同的方法。下面详细介绍这九种方法：

第一种方法，通过使用grid布局。将父级设置为grid容器，设置主轴和副轴对齐方式为居中，即可实现垂直居中。

第二种方法，同样是使用grid布局，设置父级为grid容器后，利用justify-content属性将主轴和副轴对齐方式设置为居中，同样能够实现垂直居中。

第三种方法，使用grid布局，设置父级为grid容器后，在子元素上设置外边距margin：auto；这将使得子元素垂直居中。

第四种方法，将父级设置为flex容器，使用align-items和justify-content属性将垂直和水平对齐方式设置为居中，以此达到垂直居中的效果。

第五种方法，与第四种类似，将父级设置为flex容器，然后在子元素上设置margin:auto；来实现垂直居中。

第六种方法，使用display:table-cell;属性将父级设置为表格单元格，通过vertical-align和text-align属性实现垂直居中，并利用inline-block属性来确保子元素的正确布局。

第七种方法，将父级设置为相对定位，子元素设置为绝对定位，向左/向上偏移50%进行布局，从而实现垂直居中。

第八种方法，先将父级设置为文本水平居中，然后添加伪元素::after，设置行高为父级盒子的高度，再将子元素设置为inline-block，以此完成垂直居中。

第九种方法，是较为古老且复杂的方法，现在已不常用。主要步骤是将父级设置为相对定位，子元素设置为绝对定位，给子元素设置宽高和偏移量，最后加上margin:auto;来实现垂直居中。