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

我想在另一个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到中间。但是垂直排列呢?

当前回答

这将工作的方式回到IE6!

<！DOCTYPE html>在IE6上也是必需的! [将强制IE6默认严格模式以及]。

(当然，方框着色仅供演示使用)

#outer{ width: 180px; height: 180px; margin: auto; text-align: center; } #inner{ text-align: center; vertical-align: middle; width: 100px; height: 100px; display: inline-block; padding: .3em; } #center{ height: 100%; width:0px; vertical-align: middle; display: inline-block; } div {background: rgba(0,110,255,.7)} <DIV id=outer> <div id=center> </div><div id=inner> The inner DIV </div> </DIV>

2017-08-15 08:32:51

其他回答

你可以通过添加下面提到的css样式来做到这一点。大多数浏览器都支持这一点。您可以在这里查看浏览器支持。愿一切都好！如有任何疑问，请评论

# outerDiv { 宽度:500 px; 身高:500 px; 位置:相对; 背景:灰色; 显示:flex; justify-content:中心; 对齐项目:中心; ｝ # innerDiv { 背景:青色; 宽度:284 px; 身高:290 px; ｝ < div id = " outerDiv " > < div id = " innerDiv " > 内心的Div < / div > < / div >

2017-09-12 12:56:33

我知道这个问题是一年前提出的…… 无论如何，感谢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;
}

2012-06-06 22:46:29

我想展示另一种跨浏览器的方法，可以使用CSS3 calc()解决这个问题。

我们可以使用calc()函数来控制子div的margin-top属性，当它的位置绝对相对于父div时。

使用calc()的主要优点是父元素的高度可以随时改变，并且子div将始终对齐到中间。

边缘顶部计算是动态的(通过css而不是通过脚本，这是一个非常大的优势)。

看看这个现场演示

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will always             
           center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

输出:

2019-02-08 17:59:21

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

# outerDiv { 宽度:500 px; 身高:500 px; 位置:相对; background - color: lightgrey; ｝ # innerDiv { 宽度:284 px; 身高:290 px; 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); -ms-transform: -50%， -50%;/*即9 */ -webkit-transform (-50%， -50%);/* Chrome, Safari, Opera */ 背景颜色:灰色; ｝ < div id = " outerDiv " > < div id = " innerDiv " > < / div > < / div >

2017-09-23 17:06:52

你可以在CSS中使用flex将div垂直和水平居中;

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

第二个是这样的;

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

以及生成的HTML:

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

2016-03-28 20:35:29

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

推荐文章

最新文章

标签