CSS 实现元素水平和垂直居中
Flexbox 布局 父容器使用 Flexbox 布局实现子元素的水平和垂直居中。 .container { display: flex; align-items: center; /* 实现垂直居中 */ justify-content: center; /* 实现水平居中 */ } 结合 Flexbox 和 margin: auto; 属性实现水平和垂直居中。 .container { display: flex; } .child { margin: auto; /* 同时实现水平和垂直居中 */ } Grid 布局 父容器使用 Grid 布局实现子元素的水平和垂直居中。 .container { display: grid; place-items: center; /* 同时实现水平和垂直居中 */ } Table 属性 使用 Table 属性实现水平和垂直居中。 .container { width: 100px; height: 100px; display: table-cell; vertical-align: middle; /* 实现垂直居中 */ text-align: center; /* 实现水平居中 */ } .child { width: 20px; height: 20px; display: inline-block; } 子绝父相 子绝父相