1. 水平居中
实现水平居中布局有多种方式，下面介绍几种常用的方法。
1.1 使用text-align属性
可以通过设置父元素的text-align属性为center来使其中的文本水平居中，这同样适用于行内元素和块级元素。
.parent {
text-align: center;
}
注意：适用于内联元素和块级元素，但不适用于浮动、绝对定位和弹性布局。
1.2 使用margin属性
可以通过给子元素设置左右外边距的auto来实现水平居中，适用于块级元素。
.child {
margin: 0 auto;
}
注意：适用于块级元素，不适用于内联元素、浮动和绝对定位。
1.3 使用flexbox布局
可以使用flexbox布局实现水平居中，通过设置父容器的display属性为flex，并使用justify-content属性来控制水平对齐方式。
.parent {
display: flex;
justify-content: center;
}
注意：需要考虑浏览器的兼容性，如果需要兼容旧版本的浏览器，建议使用其他方法。
2. 垂直居中
实现垂直居中布局同样有多种方式，下面介绍几种常用的方法。
2.1 使用line-height属性
可以通过设置父元素的line-height属性等于父元素的高度，并将子元素的display属性设置为inline-block或table-cell，使子元素垂直居中。
.parent {
height: 200px;
line-height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
}
注意：只适用于单行文本或单行块级元素，不适用于多行文本或多行块级元素。
2.2 使用flexbox布局
可以使用flexbox布局实现垂直居中，通过设置父容器的display属性为flex，并使用align-items属性来控制垂直对齐方式。
.parent {
display: flex;
align-items: center;
}
注意：需要考虑浏览器的兼容性，如果需要兼容旧版本的浏览器，建议使用其他方法。
2.3 使用transform属性
可以使用transform属性实现垂直居中，通过设置子元素的position属性为absolute，并使用top和left属性结合translate属性来实现居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意：需要父元素拥有明确的高度，对于未知高度的元素，需要使用其他方法。
3. 水平垂直居中
实现水平垂直居中布局同样有多种方式，下面介绍几种常用的方法。
3.1 使用flexbox布局
可以使用flexbox布局实现水平垂直居中，通过设置父容器的display属性为flex，并使用justify-content和align-items属性来控制对齐方式。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
注意：需要考虑浏览器的兼容性，如果需要兼容旧版本的浏览器，建议使用其他方法。
3.2 使用绝对定位和负边距
可以使用绝对定位和负边距实现水平垂直居中，通过设置子元素的position属性为absolute，并使用top、right、bottom和left属性分别为50%，再通过设置margin属性的负值为子元素的宽度和高度的一半来实现居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
注意：需要父元素拥有明确的宽度和高度，对于未知宽度和高度的元素，需要使用其他方法。
3.3 使用transform属性
可以使用transform属性实现水平垂直居中，通过设置子元素的position属性为absolute，并使用top和left属性结合translate属性来实现居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意：需要父元素拥有明确的宽度和高度，对于未知宽度和高度的元素，需要使用其他方法。
以上是关于CSS布局中各种居中的总结，有助于实现网页布局中不同居中需求的样式实现。通过以上方法，可以轻松实现水平、垂直和水平垂直居中的布局。