html - 如何像向左或向右浮动一样从中心开始 div？

Question

我正在尝试将 div 从中心开始，就像向右或向左浮动一样，但我没有这样做。 请帮帮我好吗？

HTML

<div class="conta">
    <div class="box">
        <p>some text</p>
    </div>
    <div class="box">
        <p>some text</p>
    </div>
    <div class="box">
        <p>some text</p>
    </div>
    <div class="box">
        <p>some text</p>
    </div>
</div>

CSS

.conta{width:100%; position:relative; text-align:center}
.conta .box{float:left; width:100px; height:100px; border:1px solid #000; margin:5px;}

我想在中心和内联中启动框。

Answer 1

有很多可能的方法。

---

一个

最简单的方法是:margin:0 auto 但你需要有固定的宽度。

DEMO

---

两个

可以将display:inline-block;设置为内部元素，将text-align:center设置为容器。

DEMO

HTML

<div>
    <div></div>
</div>

CSS

div{
    text-align:center;
}

div div{
    display:inline-block;
    background:gray;
    width:200px;
    height:100px;
}

---

三个

将position:relative设置为容器，将position:absolute设置为内部元素，然后设置left:50%和 margin-left:-100px(margin-left 必须是宽度的一半，在本例中为 100px)。

DEMO

CSS

div{
    position:relative;
}

div div{
    position:absolute;
    left:50%;
    margin-left:-100px;
    
    background:gray;
    width:200px;
    height:100px;
}