方法一：Flex布局
使用Flex布局是最简单的方法之一。只需在父容器中添加display: flex、justify-content: center和align-items: center即可实现水平和垂直居中。
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.flex-box {
background-color: #4caf50;
color: white;
padding: 20px;
font-size: 20px;
}方法二：Margin Auto
通过设置margin: auto并指定宽度和高度，可以使元素在其父容器中居中。
.margin-auto {
width: 200px;
height: 100px;
margin: auto;
background-color: #2196f3;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}方法三：Inline Block
使用inline-block和text-align: center可以实现水平居中。
.inline-block-container {
text-align: center;
height: 100vh;
display: flex;
align-items: center;
}
.inline-block-box {
display: inline-block;
background-color: #ff9800;
padding: 20px;
}方法四：绝对定位 + Transform
结合绝对定位和transform属性，可以实现精确的居中效果。
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #e91e63;
padding: 20px;
}方法五：Grid布局
使用CSS Grid布局，可以轻松实现居中。
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.grid-item {
background-color: #673ab7;
padding: 20px;
}方法六：Table布局
利用表格布局的特性，也可以实现居中效果。
.table-container {
display: table;
width: 100%;
height: 100vh;
text-align: center;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.table-content {
background-color: #3f51b5;
padding: 20px;
margin: 0 auto;
}方法七：相对定位 + Transform
结合相对定位和transform属性，实现灵活的居中。
.relative-container {
position: relative;
height: 100vh;
background-color: #f0f0f0;
}
.relative-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ff5722;
padding: 20px;
}结论
以上就是七种常见的CSS居中方法，每种方法都有其适用场景和优缺点。选择合适的方法，可以大大提高开发效率。
