css中如何让div居中

当前第2页 返回上一页

若有两个div，里面小的div相对于外面大的div水平垂直居中对齐，有以下几种方法。

• 利用position和margin：auto实现。父元素设置position：relative；子元素设置position：absolute，并设置top，left，right，bottom值相等。

• 使用position。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%，并设置左移和上移为子元素的大小的一半。

• 使用display：flex。这种方法需要设置浏览器的兼容性。

• 使用transform：translate（）。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%。最后设置transform：translate（-50%，-50%）。

以上四种方法的效果图如下显示

以上就是css中如何让div居中的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css怎么设置字体粗体效果

css怎么将字体设置成白色

css怎么设置文字间距

html和css实现字体加粗的三种方法

css中的display属性有哪些值？各有什么作用？

css中margin重叠及防止的方法介绍（代码示例）

css怎么设置分割线

什么是css样式层叠表

css怎么隐藏滚动条

css怎么设置扇形区域

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元   人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css中如何让div居中