css垂直居中的多种写法
本文介绍了四种实现垂直居中的CSS方法
flex布局搭配margin
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>垂直居中</title><style>.outer{height:300px;width:800px;background-color:gray;display:flex;left:0;top:0;}.inner{font-size:20px;background-color:green;margin:auto;}</style></head><body><divclass="outer"><divclass="inner">垂直居中的多种写法</div></div></body></html>在 Flexbox 布局中，margin: auto会自动吸收并分配容器中的所有剩余空间，将项目推向中心位置，从而实现完美的居中效果。这是 Flexbox 规范特意为 margin 定义的特殊行为。
绝对定位 + transform
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>垂直居中</title><style>.outer{height:300px;width:800px;background-color:gray;position:relative;}.inner{font-size:20px;background-color:green;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}</style></head><body><divclass="outer"><divclass="inner">垂直居中的多种写法</div></div></body></html>用绝对定位调整位置
文本布局
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>垂直居中</title><style>.outer{height:300px;width:800px;background-color:gray;line-height:300px;/* 等于容器高度 */text-align:center;}.inner{font-size:20px;background-color:green;display:inline-block;line-height:normal;/* 恢复内部正常行高 */vertical-align:middle;}</style></head><body><divclass="outer"><divclass="inner">垂直居中的多种写法</div></div></body></html>flexbox
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>垂直居中</title><style>.outer{height:300px;width:800px;background-color:gray;display:flex;justify-content:center;/* 水平居中 */align-items:center;/* 垂直居中 */}.inner{font-size:20px;background-color:green;}</style></head><body><divclass="outer"><divclass="inner">垂直居中的多种写法</div></div></body></html>Flexbox 是最常用的方法之一，代码简洁且兼容性好。