当前位置：首页 > news >正文

css垂直居中的多种写法

news 2026/6/13 23:53:07

本文介绍了四种实现垂直居中的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>