logo标签列表

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

htmlcss
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水平对齐到中间。那么垂直对齐呢？

如果您使用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个回答
3
垂直居中一个div在另一个div内部

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

2

小工具链接 < http://jsfiddle.net/dGHFV/2515/>

试试这个

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

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }
2
我已经使用以下解决方案一年多了，它可以在IE 7和8上工作。
<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
2

以下是我的解决方案。外层div的宽度和高度可以进行定义。

代码如下:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

1
尝试像这样对齐内部元素：

top: 0;
bottom: 0;
margin: auto;
display: table;

and of course:

position: absolute;
它是垂直的而不是水平的。 - Sterling Diaz
1
你可以使用简单的javascript（jQuery）块来实现这一点。
CSS：
#outerDiv{
    height:100%;
}

JavaScript：
<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>
1
对于没有指定高度值的innerdiv，没有纯CSS解决方案可以使其垂直居中。一个JavaScript解决方案可以是获取innerdiv的offsetHeight，然后计算style.marginTop。
1

这将适用于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><!--Don't break this line!--><div id=inner>
The inner DIV
</div>
</DIV>

1
你可以使用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>
1
我希望展示另一种跨浏览器的方法，可以使用CSS3的calc()来解决这个问题。
当子div相对于父div定位为绝对位置时，我们可以使用calc()函数来控制margin-top属性。
使用calc()的主要优点是，父元素的高度可以随时更改，而子div始终会居中对齐。 margin-top的计算是通过CSS动态进行的（不是通过脚本），这是一个非常大的优势。
查看此LIVE DEMO。
<!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>

输出：

enter image description here

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接