巧用CSS:水平垂直居中方法大揭秘

现代web页面追求完美布局，而元素水平垂直居中是其中必备技能。CSS提供了多种解决方案，助你轻松搞定这个难题。

水平居中

方法 1：text-align

最简单的方式，适用于单行文本元素：

text-align: center;

方法 2：margin: auto

适用于块级元素，左右自动留白居中：

margin: 0 auto;

方法 3：flexbox

强大的flexbox布局，可灵活控制水平居中：

display: flex;
justify-content: center;

垂直居中

方法 1：line-height

适用于单行文本元素，通过设置行高与元素高度相等实现垂直居中：

line-height: 50px;
height: 50px;

方法 2：vertical-align

适用于内联元素，可指定垂直居中基线位置：

vertical-align: middle;

方法 3：transform

通过transform平移元素，实现垂直居中：

transform: translateY(-50%);

方法 4：flexbox

与水平居中类似，flexbox布局也可实现垂直居中：

display: flex;
align-items: center;

方法 5：absolute

适用于绝对定位元素，通过设置top和bottom属性同时为0实现垂直居中：

position: absolute;
top: 0;
bottom: 0;

综合水平垂直居中

方法 1：flexbox

flexbox布局可以轻松实现水平垂直同时居中：

display: flex;
justify-content: center;
align-items: center;

方法 2：absolute + transform

通过绝对定位设置top和left为50%，再使用transform平移一半元素高度，实现水平垂直同时居中：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

方法 3：margin + line-height

适用于单行文本元素，通过设置上下外边距和行高与元素高度相等实现水平垂直同时居中：

margin: 0 auto;
line-height: 50px;
height: 50px;