行业知识
CSS【详解】居中对齐 （水平居中 vs 垂直居中）
2026-11-02 08:20:57
来源：互联网转载
水平居中
内部块index.php/tags-41973.html" >���元素的宽度要小于容器(父元素)
方案一：文本居中对齐（内联元素）
限制条件：仅用于内联元素 display:inline 和 display: inline-block;
给容器添加样式
text-align:center
Document .box { margin: 30px 30px 0px 300px; border: 1px solid gray; text-align: center; } .item { display: inline-block; width: 400px; background: yellow; } 水平居中 -- display: inline 水平居中 -- display: inline-block 方案二：自动外边距（块级元素）
限制条件：仅用于块级元素 display:block;
给内部元素添加样式
margin: auto
Document .box { margin: 30px; border: 1px solid gray; } .item { margin: auto; width: 300px; background: yellow; } 水平居中 -- 块级元素 display:block 方案三：flex布局【推荐】
给容器添加样式
display: flex;justify-content: center;
Document .box { margin: 30px 30px 0px 300px; border: 1px solid gray; display: flex; justify-content: center; } .item { width: 400px; background: yellow; } 水平居中 -- flex布局 display: inline 水平居中 -- flex布局 display: block 方案四：子绝父相 + transform （CSS3）
限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;left: 50%;transform: translate(-50%, 0);
Document .box { margin: 30px 30px 0px 300px; border: 1px solid gray; height: 50px; position: relative; } .item { background-color: yellow; position: absolute; left: 50%; transform: translate(-50%, 0); } 水平居中 -- 子绝父相 + transform 方案五：子绝父相 + 自动外边距 （指定宽度）
限制条件：内部元素需限定宽度
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;left: 0;right: 0;margin: auto;
Document .box { margin: 30px 30px 0px 300px; border: 1px solid gray; height: 50px; position: relative; } .item { background-color: yellow; position: absolute; left: 0; right: 0; margin: auto; width: 300px; } 水平居中 -- 子绝父相 + 自动外边距 方案六：子绝父相 + 负外边距 （知道宽度 + 宽度计算）
限制条件：需知道内部元素的宽度（无法预知宽度的内联元素和未知宽度的块级元素都不适用）
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;left:50%;margin-left:-内部元素宽度的一半
Document .box { margin: 30px; border: 1px solid gray; height: 100px; position: relative; } .item { width: 400px; background: yellow; position: absolute; left: 50%; margin-left: -200px; } 水平居中 -- 绝对定位元素 position:absolute 垂直居中
内部块级元素的高度要小于容器(父元素)
方案一：行高 = 容器高度（单行内联元素）
限制条件：仅用于单行内联元素 display:inline 和 display: inline-block;
给容器添加样式
height: 100px; line-height: 100px;
Document .box { margin: 30px; border: 1px solid gray; height: 100px; line-height: 100px; } 垂直居中 -- 内联元素 display:inline 方案二：flex布局【推荐】
给容器添加样式
display: flex;align-items: center;
方案三：子绝父相 + transform（CSS3）
限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;top: 50%;transform: translate(0, -50%);
Document .box { margin: 30px; border: 1px solid gray; height: 100px; position: relative; } .item { position: absolute; top: 50%; transform: translate(0, -50%); background-color: yellow; } 垂直居中 -- 子绝父相 transform 方案四：子绝父相 + 自动外边距（指定高度）
限制条件：内部元素需限定高度
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;top: 0;bottom: 0;margin: auto;
- 内联元素也有效，因为内联元素绝对定位后，display 会变为 block
Document .box { margin: 30px; border: 1px solid gray; height: 100px; position: relative; } .item { position: absolute; top: 0; bottom: 0; margin: auto; background-color: yellow; height: 50px; } 垂直居中 -- 子绝父相 + 自动外边距方案五：子绝父相 + 负外边距 （知道高度 + 高度计算）
限制条件：需知道内部元素的高度
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;top: 50%;margin-top: -内部元素高度的一半;
Document .box { margin: 30px; border: 1px solid gray; height: 100px; position: relative; } .item { position: absolute; top: 50%; margin-top: -25px; height: 50px; background-color: yellow; } 垂直居中 -- 子绝父相 + 负外边距水平垂直居中
参考上文分别实现水平居中和垂直居中即可，常用方案如下：
方案一：flex布局【推荐】
给容器添加样式
display: flex;justify-content: center;align-items: center;
方案二：子绝父相 + transform （CSS3）
限制条件：浏览器需支持CSS3，比较老的浏览器不适用
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
方案三：子绝父相 + 自动外边距（指定高度和宽度）
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
方案四：子绝父相 + 负外边距 （知道宽度和高度 + 宽度和高度计算）
限制条件：需知道内部元素的宽度和高度
给容器（父元素）添加样式
position: relative
给内部元素添加样式
position: absolute;left:50%;margin-left:-内部元素宽度的一半;top: 50%;margin-top: -内部元素高度的一半;
Document .box { margin: 30px 30px 0px 300px; border: 1px solid gray; height: 100px; position: relative; } .item { background-color: yellow; position: absolute; left: 50%; margin-left: -150px; top: 50%; margin-top: -25px; width: 300px; height: 50px; } 水平垂直居中 -- 子绝父相 + 负外边距
