在 CSS 中,要使元素的高度垂直居中,可以使用 flex 布局或表格布局。以下示例使用 flex 布局实现:.container { display: flex; justify-content:
在 CSS 中,要使元素的高度垂直居中,可以使用 flex 布局或表格布局。以下示例使用 flex 布局实现:
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 300px; /* 设置容器高度 */ }
上面的代码中,我们将容器设置为 flex 布局,并设置了 justify-content 和 align-items 属性分别居中容器的水平和垂直方向。同时,我们也设置了容器的 height 属性为 300px。
如果你不想使用 flex 布局,还可以采用 table 和 table-cell 的方式实现垂直居中:
.container { display: table; height: 300px; /* 设置容器高度 */ } .inner { display: table-cell; vertical-align: middle; /* 垂直居中 */ text-align: center; /* 水平居中 */ }
上述代码中,我们将容器的 display 属性设置为 table,将内部元素的 display 属性设置为 table-cell,然后使用 vertical-align 和 text-align 属性将元素垂直和水平居中。
粉丝
0
关注
0
收藏
0