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

当前回答

如果你在看完上面给出的精彩答案后仍然不明白。

这里有两个简单的例子，告诉你如何实现它。

使用显示:表格单元格

.wrapper { 显示:表格单元; vertical-align:中间; text-align:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; ｝ .container { 显示:inline-block; text-align:左; 填充:20 px; 边框:1px solid #cd0000; ｝ < div class = "包装" > < div class = "容器" > 使用"<strong>display: table-cell</strong>"将div居中对齐 < / div > < / div >

使用flex-box(显示:flex)

.wrapper { 显示:flex; justify-content:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; ｝ .container { align-self:中心; 填充:20 px; 边框:1px solid #cd0000; ｝ < div class = "包装" > < div class = "容器" > 使用"<strong>display: flex</strong>"将div居中 < / div > < / div >

注意:在使用上述实现之前，请检查display: table-cell和flex的浏览器兼容性。

2017-01-16 13:57:46

其他回答

对于innerdiv没有指定它的高度值，没有纯CSS解决方案使它垂直居中。javascript的解决方案可以得到innerdiv的offsetHeight，然后计算style.marginTop。

2011-06-27 08:30:26

小提琴链接< 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;
    }

2016-07-26 09:49:27

当你的高度没有设置(自动);你可以给内部div一些填充(顶部和底部)，使它垂直居中:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

2017-06-01 08:21:13

在另一个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

我想展示另一种跨浏览器的方法，可以使用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

推荐文章

最新文章

标签