在另一个 div 中垂直居中一个 div

Question

在另一个 div 中垂直居中一个 div

653

我想让一个位于另一个div内部的div居中。

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

这是我目前正在使用的CSS。

    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }
    
    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

从你可以看到，我现在使用的方法取决于#innerDiv的宽度和高度。如果宽度/高度发生变化，我将不得不修改margin-top和margin-left的值。是否有通用的解决方案，可以使#innerDiv独立于其大小居中对齐？

我发现使用margin:auto可以将#innerDiv水平对齐到中间。那么垂直对齐呢？

- user700284

如果您使用margin-top: auto; margin-bottom: auto;会发生什么？ - Muhammad Umer

1

http://jsfiddle.net/k6ShD/4/ - Muhammad Umer

这里有两种简单的方法可以在div中心垂直、水平或同时居中（纯CSS）：https://dev59.com/bmct5IYBdhLWcg3wmOZN#31977476 - Michael Benjamin

别人给的建议是正确的。只是补充一下。如果你有一个名为DivParent的父级div和一个名为ChildDiv的子级div，那么只需在子级div中添加margin: auto，这将使子级div或内部div居中于父级div。 - Alok Ranjan

24个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mangesh Jadhav · Answer 1

在此输入图像描述 100%有效

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

- user3943543 · Answer 2

在父元素上使用text-align:center，子元素上使用display:inline-block。这将使几乎所有内容居中。我相信它被称为“块浮动”。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

这也是浮点数的一个不错的替代方案，祝你好运！

- Bhimashankar Sutar · Answer 3

要垂直和水平居中对齐：

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

- godlark · Answer 4

我知道这个问题是一年前创建的... 无论如何，感谢CSS3，您可以轻松地在div中垂直对齐div（例如，在此处http://jsfiddle.net/mcSfe/98/）

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
}