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如何设置表格边框间的距离？border-spacing属性的使用

css ul怎么去掉点

什么是css

html img图片怎么设置透明度

html和css是什么语言？

css的背景图怎么加边框

css怎么定义div的宽度和高度

css怎么改变鼠标形状

css的加载顺序是什么

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

书籍

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

￥83.86元   人民邮电出版社

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

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