HomeQuestionBlogAboutMessageToolbox
English

将div垂直居中放置在另一个div中[重复]

乐米亚2020-03-17

我想将添加到另一个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;
    }

如您所见，我现在使用的方法取决于width和height的值innerDiv。如果width / height发生变化，我将不得不修改margin-topand值。margin-left是否有任何通用解决方案可用于innerDiv始终将居中对齐它的大小？

我发现使用margin:auto可以将innerDiv水平分配到中间，但是垂直分配中间呢？

小哥GO2020/03/17 17:25:58

居中对齐垂直和水平：

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

#child {
     display:table-cell;
     vertical-align:middle;
}
梅樱2020/03/17 17:25:58

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

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

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

该margin-top计算是动态进行的（通过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>

输出：

在此处输入图片说明

小宇宙古一2020/03/17 17:25:58

我知道这个问题是在一年前创建的...无论如何，感谢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;
}
乐米亚2020/03/17 17:25:58

在父元素上对齐文本居中，在子元素上显示内联块。这将使所有事物居中。我相信它被称为“浮动块”。

<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>

这也是花车的好选择，祝您好运！

猪猪老丝2020/03/17 17:25:58

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

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

而且当然：

position: absolute;
Stafan小小小宇宙2020/03/17 17:25:58

您可以使用flex在CSS中垂直和水平居中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>
马克2020/03/17 17:25:58

这将可以回溯到IE6！

<!DOCTYPE html>IE6也需要！[也将强制IE6默认严格模式]。

（当然，框的颜色仅用于演示目的） 

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

西门逆天2020/03/17 17:25:58

将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>

逆天泡芙2020/03/17 17:25:58

对于未指定其height值的innerdiv，没有纯css解决方案使其垂直居中。可以通过JavaScript解决方案获取innerdiv的offsetHeight，然后计算style.marginTop。

前端L小小2020/03/17 17:25:58

如果您在阅读完上面给出的奇妙答案后仍然不明白。

这是两个如何实现它的简单示例。

使用显示：表格单元

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

使用伸缩框（显示：伸缩）

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

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

达蒙小胖2020/03/17 17:25:58

小提琴链接< 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;
    }
路易神奇Mandy2020/03/17 17:25:58

当您height没有设置（自动）; 您可以给内部div一些填充（顶部和底部）以使其垂直居中：

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>
Pro小卤蛋2020/03/17 17:25:58

在此处输入图片说明 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/

米亚神奇2020/03/17 17:25:58

这对我有用。可以定义外部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>

Stafan逆天前端2020/03/17 17:25:58

自一年多以来，我一直在使用以下解决方案，它也可与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>
斯丁猪猪2020/03/17 17:25:57

另一种方法是使用Transform Translate

外层div必须将其position对relative或fixed和内蒙古事业部必须设置它position到absolute，top并left以50%和应用transform: translate(-50%, -50%)。

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

经过测试：

  • Opera 24.0（最低12.1）
  • Safari 5.1.7（至少带有-webkit-前缀的4）
  • Firefox 31.0（带有-moz-前缀的最低版本3.6，不带前缀的16版本）
  • Chrome 36（带有-webkit-前缀的最少11个，不带前缀的36个）
  • IE 11、10（带有-ms-前缀的最低9，从10无前缀的）
  • 更多浏览器，我可以使用吗？
ASamJim2020/03/17 17:25:57

与其将自己束缚在难以编写和难以维护的CSS上（这还需要仔细的跨浏览器验证！），不如将它束之高阁，我发现放弃CSS并使用非常简单的HTML 1.0更好：

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

这样可以完成原始海报所需的一切，并且功能强大且可维护。

古一2020/03/17 17:25:57

我个人更喜欢使用隐藏的伪元素来覆盖外部容器的整个高度，并将其与其他内容垂直对齐的技巧。克里斯·科耶尔（Chris Coyier）有一篇很好的关于该技术的文章。http://css-tricks.com/centering-in-the-unknown/ 此方法的巨大优势是可伸缩性。您不必知道内容的高度，也不必担心其增长/缩小。此解决方案按比例缩放:)。

这是您需要的所有CSS的小提琴和一个有效的示例。 http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}
路易伽罗2020/03/17 17:25:57

将div项目垂直居中放置在另一个div中

只需将容器设置为display:table，然后将内部项目设置为display:table-cell。height在容器上设置一个，然后vertical-align:middle在内部项目上设置。早在IE9时代，它就具有广泛的兼容性。

请注意，垂直对齐方式将取决于父容器的高度。

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

Davaid泡芙2020/03/17 17:25:57

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

您可以通过简单地添加上述CSS样式来实现。祝一切顺利。如有任何疑问，请发表评论

飞云A2020/03/17 17:25:57

实现此水平和垂直居中的另一种方法是：

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

（参考）

小胖十三2020/03/17 17:25:57

tl; dr

垂直对齐中间作品，但是您将不得不table-cell在父元素和inline-block子元素上使用。

此解决方案无法在IE6和7中使用。
您的解决方案是更安全的方法。
但是由于您使用CSS3和HTML5标记了问题，所以我一直认为您不介意使用现代解决方案。

经典解决方案（表布局）

这是我最初的答案。它仍然可以正常工作，并且是获得最广泛支持的解决方案。表布局将影响您的渲染性能，因此我建议您使用一种更现代的解决方案。

这是一个例子

经过测试：

  • FF3.5 +
  • FF4 +
  • Safari 5+
  • 铬11+
  • IE9 +

的HTML

<div class="cn"><div class="inner">your content</div></div>

的CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

现代解决方案（转换）

由于现在已经很好地支持转换，因此有一种更简单的方法。

的CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

More examples & possibilities: Compare all the methods on one pages

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标
5 Answer
如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)
25 Answer
MAC终端删除代理有效命令
1 Answer
vue动态路由跳转同一地址不刷新页面
0 Answer
NUXT引入tailwindcss报错Error: Expected an opening square bracket.
1 Answer

LINKS

QuestionBlogMessageToolbox