hmtl 中div宽度不定时如何居中

最新推荐文章于 2024-06-24 14:00:02 发布

最新推荐文章于 2024-06-24 14:00:02 发布 · 173 阅读

web 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种在CSS布局中使不确定宽度的div元素居中的方法，通过使用相对定位和table显示属性来实现，适用于多种网页布局场景。

传统的div居中方式margin: 0 auto;在div是定宽的时候很好用，但是当div的宽度不定，且需要将div块居中时，传统的margin方法就不好用了。下面就是一种div不定宽时的居中方式。
不定宽居中方式：


<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>


/*首先清浮动*/
.parent::after {
     content: " ";
     display: block;
     height: 0px;
     clear: both;
}
/*不定宽居中*/
.children {
     position: relative;
     display: table;
     margin: 0 auto;
}
.children {
     width:  x;
     height: x;
     float:left;
}