div嵌套水平居中问题

最新推荐文章于 2022-10-20 13:02:37 发布

原创最新推荐文章于 2022-10-20 13:02:37 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

网页问题专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用CSS实现div元素的居中效果，包括水平居中、垂直居中以及水平垂直居中。通过设置父级div的宽度、position属性和display属性，以及子级div的margin、position和width等属性，可以有效地实现各种居中布局。示例代码展示了具体实现方法。

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

问题背景：div的style设置了margin：0px auto ，但却不生效
问题解决：
1. 父级div设置宽度，
2. 父级div设置position:absolute
3. 父级div设置display:inline-block
4. 当前div设置宽度，
5. 当前div 不能设置position：absolute
6. 当前div 不能设置display:inline-block

代码参考：

<!--父级div-->
<div style="width: 200px;height: 200px;position: absolute;display: inline-block;background-color: red;left:100px">
    <!--当前要做居中的div-->
    <div style="width: 40px;height: 40px;margin:0px auto;background-color: yellow;"></div>
    <span>水平居中</span>
</div>
<br/>

<!--父级div-->
<div style="width: 200px;height: 200px;position:absolute;display: inline-block;background-color: red;top:300px;left:100px">
    <!--当前要做居中的div-->
    <div style="position:absolute;top:0;bottom:0;margin:auto 0px;width: 40px;height: 40px;background-color: yellow;"></div>
    <span>垂直居中</span>
</div>


<!--父级div-->
<div style="width: 200px;height: 200px;position:absolute;display: inline-block;background-color: red;top:600px;left:100px">
    <!--当前要做居中的div-->
    <div style="position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width: 40px;height: 40px;background-color: yellow;"></div>
    <span>水平垂直都居中</span>
</div>


<div style="width: 200px;height: 200px;position:absolute;display: inline-block;background-color: red;top:900px;left:100px">
    <div style="position:absolute;left:0;right:0;margin:0px auto;width: 40px;height: 40px;background-color: yellow;"></div>
    <span>水平居中2</span>
</div>

在这里插入图片描述