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

科技前沿 • 2025-06-11 20:55 • 阅读 31

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p>

讯享网

text-align + line-height

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

讯享网

在这里插入图片描述
讯享网

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

1、父元素设置 padding值 + 子元素margin ：auto

在这里插入图片描述

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

2、position + transform

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

讯享网

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

在这里插入图片描述

3、table布局

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

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

4、flex布局

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

讯享网

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

5、grid布局

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

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

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