使用margin：auto来垂直对齐div

时间：2012-09-13 22:26:15

标签： html css centering

所以我知道如果我们使用margin:0 auto;，我们可以将div水平居中。 margin:auto auto;应该如何运作我认为应该如何运作？垂直居中也是如此？

为什么vertical-align:middle;也不起作用？

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

JSFiddle

13 个答案:

答案 0 :(得分：146)

您无法使用：

vertical-align:middle因为it's not applicable to block-level elements

margin-top:auto和margin-bottom:auto因为their used values would compute as zero

margin-top:-50%因为percentage-based margin values are calculated relative to the width of containing block

事实上，文档流的性质和element height calculation algorithms使得无法使用边距将元素垂直居中于其父元素内。每当垂直边距的值改变时，它将触发父元素高度重新计算（重新流动），这将反过来触发原始元素的重新中心......使其成为无限循环。

您可以使用：

A few workarounds like this适用于您的场景;这三个元素必须像这样嵌套：

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}
.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}
.content {
    #position: relative;
    #top: -50%;
    margin: 0 auto;
    width: 200px;
    border: 1px solid orange;
}
<div class="container">
    <div class="helper">
        <div class="content">
            <p>stuff</p>
        </div>
    </div>
</div

根据Browsershot，

JSFiddle可以正常工作。

答案 1 :(得分：78)

由于这个问题是在2012年提出的，我们在浏览器支持flexbox方面取得了很大进展，我觉得这个答案是强制性的。

如果您的父容器的显示为flex，那么是，margin: auto auto（也称为margin: auto）将在水平和垂直方向，无论它是inline还是block元素。

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
}
#child {
    margin: auto auto;
}
<div id="parent">
    <div id="child">hello world</div>
</div>

请注意，宽度/高度不必绝对指定，例如 example jfiddle ，它使用相对于视口的大小调整。

尽管浏览器对flexboxes的支持在发布时处于历史最高水平，但许多浏览器仍然不支持它或需要供应商前缀。有关更新的浏览器支持信息，请参阅http://caniuse.com/flexbox。

更新

由于这个答案得到了一些关注，我还想指出，如果您使用的是margin，并且希望将所有内容都集中在一起，则根本不需要指定display: flex容器中的元素：

#parent {
    width: 50vw;
    height: 50vh;
    background-color: gray;
    display: flex;
    align-items: center; /* horizontal */
    justify-content: center; /* vertical */
}
<div id="parent">
    <div>hello world</div>
</div>

答案 2 :(得分：57)

以下是我发现的最佳解决方案：http://jsfiddle.net/yWnZ2/446/适用于Chrome，Firefox，Safari，IE8-11＆amp;边缘。

如果你有一个声明的height（height: 1em，height: 50%等），或者它是浏览器知道高度的元素（img，{{1} }，或者svg例如），那么垂直居中所需要的就是：

canvas

您通常需要指定.message { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 或width，以便内容不会延伸整个屏幕/容器的长度。

如果您将此模式用于您希望始终在视口中居中与其他内容重叠的模式，请对{2}而不是max-width使用position: fixed;。 http://jsfiddle.net/yWnZ2/445/

这是一篇更完整的文章：http://codepen.io/shshaw/pen/gEiDt

答案 3 :(得分：17)

此页面中的任何一种解决方案都不适用（对我而言）。

我的解决方案

HTML 

<body>
  <div class="centered">
  </div>
</body>

CSS 

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

答案 4 :(得分：9)

我知道这个问题是从2012年开始的，但我找到了最简单的方法，我想分享。

HTML：

<div id="parent">
     <div id="child">Content here</div>
</div>

和CSS：

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

答案 5 :(得分：7)

如果您知道要居中的div的高度，则可以将其绝对置于其父级中，然后将top值设置为50%。这将使孩子的最高分为其父母的50％，即太低。将margin-top设置为其高度的一半，将其拉回。所以现在你有一个子div的垂直中点位于父级的垂直中点 - 垂直居中！

示例：

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    background:yellow;
    width:200px;
    margin:auto auto;
    padding:10px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

http://jsfiddle.net/yWnZ2/2/

答案 6 :(得分：3)

这两个解决方案只需要两个嵌套元素 第一 - 相对和绝对定位如果内容是静态的（手动中心）。 

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

或用于流体设计 - 对于确切的内容中心，请使用以下示例：

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

你需要＆＃39; min-height＆＃39;如果内容超过窗口高度的50％，则设置。您还可以使用移动设备和平板电脑设备的媒体查询来操纵此高度。但只有你玩响应式设计。

我猜你可以更进一步，如果需要某些原因，可以使用简单的JavaScript / JQuery脚本来操纵最小高度或固定高度。

第二 - 如果内容流畅您还可以使用具有垂直对齐和文本对齐居中的表格和表格单元格css属性：

/*in a wrapper*/  
display:table;

和

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

完美地工作和扩展，通常用作响应式网页设计解决方案，网格布局和操纵对象宽度的媒体查询。

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

我更倾向于使用表格解决方案来确定内容，但在某些情况下，相对绝对定位会做得更好，特别是如果我们不想保持内容对齐的确切比例。

答案 7 :(得分：1)

＆＃13;
＆＃13; 
.black {
    display:flex;
    flex-direction: column;
    height: 200px;
    background:grey
}
.message {
    background:yellow;
    width:200px;
    padding:10px;
    margin: auto auto;
}
＆＃13; 
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 8 :(得分：0)

没有一种简单的方法可以将div垂直居中，这可以解决各种情况。

但是，根据具体情况，有很多方法可以做到。

以下是其中一些：

  • 设置父元素的顶部和底部填充，例如填充：20px 0px 20px 0px
  • 使用表格，表格单元格将其内容垂直居中
  • 设置父元素的位置相对值和想要垂直居中的div为绝对值并将其设置为top：50px;底部：50像素;例如

您也可以谷歌搜索“css vertical centering”

答案 9 :(得分：0)

使用Flexbox：

<强> HTML： 

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

<强> CSS： 

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

View result

答案 10 :(得分：0)

可变高度，边距顶部和底部自动

＆＃13;
＆＃13; 
.black {background:rgba(0,0,0,.5);
width: 300px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;}
.message{
background:tomato;
margin:auto;
padding:5%;
width:auto;
}
＆＃13; 
<div class="black">
<div class="message">
    This is a popup message.
</div>
＆＃13;
＆＃13;
＆＃13;

可变高度，边距顶部和底部自动

答案 11 :(得分：0)

.black {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.5);
}
.message {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background:yellow;
    width:200px;
    padding:10px;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>

答案 12 :(得分：0)

我认为您可以使用Flexbox修复该问题

.black {
  height : 200px;
  width : 200px;
  background-color : teal;
  border: 5px solid rgb(0, 53, 53);
  /* This is the important part */
  display : flex;
  justify-content: center;
  align-items: center;
}

.message {
  background-color :  rgb(119, 128, 0);
  border: 5px solid rgb(0, 53, 53);
  height : 50%;
  width : 50%;
  padding : 5px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

相关问题
最新问题