水平垂直居中
margin:auto/text-align/line-height/flex/grid/transform 各种居中方案
水平垂直居中
CSS 居中是一个经典话题——有多种方案，现代项目推荐 Flexbox/Grid。
学完本章你将： 掌握 margin:auto、text-align、Flexbox、Grid、transform 居中。
水平居中
css
/* 块级元素 */
.center-block {
width: 600px;
margin: 0 auto;
}
/* 行内/文本 */
.center-text { text-align: center; }
/* Flexbox */
.flex-center { display: flex; justify-content: center; }垂直居中
css
/* 单行文字（行高 = 容器高） */
.vcenter-text {
height: 60px;
line-height: 60px;
}
/* 多行文字 —— 用 padding */
.vcenter-padding {
padding-top: 30px;
padding-bottom: 30px;
}
/* Flexbox（推荐） */
.flex-vcenter {
display: flex;
align-items: center;
height: 200px;
}水平+垂直居中
css
/* Flexbox（最推荐） */
.flex-center-all {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
/* Grid */
.grid-center-all {
display: grid;
place-items: center; /* 一行搞定！ */
height: 300px;
}
/* 绝对定位 + transform（传统） */
.abs-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}