当前第2页 返回上一页
注意：inline-block存在浏览器兼容性问题，另行处理因设置inline-block带来的副作用。
补充：使用定位
方式：父级元素设置属性：position: relative;
子一级元素设置属性：position: absolute;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="div-parent">
<style>
.div-parent {
width: 400px;
height: 200px;
background-color: #aaa;
position: relative;
}
.div-child {
width: 80px;
height: 50px;
background-color: #007FFF;
position:absolute;
left: 40%;
}
</style>
<div class="div-child"></div>
</div>
|
效果如图：
注意：适用于父级元素宽度已知的情况，居中定位自己设置比较麻烦。
【推荐学习：css视频教程】
以上就是CSS如何设置div水平居中的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css grid-rows属性怎么用
html如何用css美化表格
css怎么设置fontfamily
css 如何显示部分图片
css的含义是什么
css如何清除默认样式并设置公共样式
css外边距如何定义
css怎么去掉border的底部
css怎样固定div或者table在指定位置
css什么时候用padding
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS如何设置div水平居中
