居中div的方法总结

最新推荐文章于 2025-08-08 12:36:36 发布

原创最新推荐文章于 2025-08-08 12:36:36 发布 · 528 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文介绍了多种CSS布局技巧，包括水平居中与垂直居中的方法。涵盖了margin、display、position等属性的应用，以及flexbox和transform等现代CSS特性。适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、margin+定宽：

width: 100px;margin: 0 auto;

2、table + margin：

display: table;margin: 0 auto;

(display: table 在表现上类似 block 元素，但是宽度为内容宽。)

3、inline-block + text-align:(用于多个块级元素)

.child {
display: inline-block;
}
.parent {
text-align: center;
}

兼容性佳（甚至可以兼容 IE 6 和 IE 7）

4、 absolute + margin-left：

.parent {
position: relative;
}
.child {
position: absolute;
left:50%;
width: 100px;
margin-left: -50px; /* width/2 */
}

宽度固定
相比于使用transform ，有兼容性更好

5、 absolute + transform:

.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题

6、 flex + justify-content

.parent {
display: flex;
justify-content: center;
}

只需设置父节点属性，无需设置子元素
flex有兼容性问题

垂直居中：vertical-align:middle;
父元素高度不确定的文本，图片，块级元素的竖直居中：给父元素设置相同的上下边距实现
父元素高度确定的单行文本垂直居中：line-height值与父元素的高度值相同

1、table-cell + vertical-align：

.parent {
display: table-cell;
vertical-align: middle;
}

兼容性好(IE 8以下版本需要调整页面结构至 table)

2、absolute + transform:

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform 为 CSS3 属性，有兼容性问题
同水平居中，这也可以用margin-top实现，原理水平居中

3、flex + align-items:
如果说absolute强大，那flex是最强的。但它有兼容问题

.parent {
display: flex;
align-items: center;
}

1、absolute + transform

.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题

2、inline-block + text-align + table-cell + vertical-align

.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
兼容性好

3、flex + justify-content + align-items

.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /垂直居中/
}