在前端开发中，实现元素的居中对齐是一个常见的需求。CSS3 提供了多种灵活的技巧，可以实现水平和垂直方向的居中对齐。
1. 水平居中对齐
1.1 text-align: center;
对于行内元素，可以通过设置父元素的 text-align 属性为 center 来实现水平居中对齐。
.parent { text-align: center; } .child { display: inline-block; }
1.2 margin: auto;
对于块级元素，可以使用 margin: auto; 来实现水平居中对齐。这需要父元素设置宽度，并且子元素需要是块级元素。
.parent { width: 50%; margin: auto; } .child { display: block; }
1.3 flexbox
使用 Flexbox 布局可以更轻松地实现水平居中对齐。
.parent { display: flex; justify-content: center; } .child { /* 没有特殊要求 */ }
2. 垂直居中对齐
2.1 line-height
对于单行文本，可以使用 line-height 属性实现垂直居中对齐。
.parent { height: 100px; line-height: 100px; } .child { display: inline-block; }
2.2 flexbox
Flexbox 布局同样适用于垂直居中对齐。
.parent { display: flex; align-items: center; justify-content: center; } .child { /* 没有特殊要求 */ }
2.3 position 和 transform
使用 position: absolute; 和 transform 属性可以实现相对于父元素的垂直居中对齐。
.parent { position: relative; height: 200px; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
3. 水平和垂直居中对齐
3.1 flexbox
结合使用 Flexbox 布局可以轻松实现水平和垂直方向的居中对齐。
.parent { display: flex; align-items: center; justify-content: center; } .child { /* 没有特殊要求 */ }
3.2 position 和 transform
同样，使用 position 和 transform 属性可以实现水平和垂直方向的居中对齐。
.parent { position: relative; height: 200px; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
