2026年grid布局垂直居中（grid布局高度）

编程日记 • 2026-03-10 08:21 • 阅读 5

设置行内素（包括文本，图片等）水平居中可以通过设置父素的text-align属性
垂直居中可以通过设置父素行高的方式。将其父素的line-height设成和高度一样的数值，被包裹的行内素或者已经设置为inline-block的块级素就会垂直居中。

在这里插入图片描述

注：只适用于单行的行内素

在这里插入图片描述

添加box-sizing:border-box属性后padding和border的值就不会在影响素的宽高，相当于把padding和border的值都算在content里，不然素的实际宽高 = padding值 + border值 + 素宽高

父素设置绝对定位，子素设置相对定位，然后再给子素设置一个translate值即可实现水平垂直居中

需要子素设置translate是因为position定位是以左上角为基准的，而不是素中心点，设置translate让子素移动自身大小的一半才能实现水平垂直居中

在这里插入图片描述

属性的作用是让标签素以表格单格的形式呈现，类似于td标签，设置素垂直居中，设置水平居中

很明显可以看出来通过table布局的局限就是只适用于行内素或者行内块级素

flexbox有两条轴线，一条主轴一条侧轴。设置父素为flex容器，然后设置主轴和交叉轴的对齐方式即可

如果是行内素可以通过将其设置为flex容器

CSS 网格布局将一个页面划分为几个主要区域，同时定义这些区域的大小、位置、层次等关系，在grid容器里面的水平区域称为行（row），垂直区域称为列（column），行与列的交叉称为单格。

设置父素为grid容器，然后设置单格内容的水平垂直位置即可实现水平垂直居中（因为没有设置行和列所以整个wrap素为一个单格）

如果是行内素可以通过将其设置为grid容器
在这里插入图片描述

今天的文章 2026年grid布局垂直居中（grid布局高度）分享到此就结束了，感谢您的阅读。