138

所以我知道如果我们使用margin:0 auto;. 应该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

4

14 回答 14

188

2020 年 8 月更新

尽管下面的有用信息仍然值得一读，但我们已经使用 Flexbox 有一段时间了，所以按照这个答案使用它。

你不能使用：

vertical-align:middle因为它不适用于块级元素

margin-top:auto并且margin-bottom:auto因为它们使用的值将计算为零

margin-top:-50%因为基于百分比的边距值是相对于包含块的宽度计算的

事实上，文档流和元素高度计算算法的本质使得不可能使用边距来使元素在其父元素中垂直居中。每当更改垂直边距的值时，它将触发父元素高度重新计算（重新流动），这反过来又会触发原始元素的重新居中......使其成为无限循环。

您可以使用：

像这样的一些解决方法适用于您的场景；这三个元素必须像这样嵌套：

.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可以正常工作。

于 2012-09-14T02:23:07.650 回答
143

自从 2012 年提出这个问题以来，我们在浏览器对 flexbox 的支持方面取得了长足的进步，我觉得这个答案似乎是强制性的。

如果您的父容器的显示为flex，则yes , margin: auto auto（也称为margin: auto）将使其水平和垂直居中，无论它是否为inlineorblock元素。

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

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

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

更新

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

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

于 2014-09-27T22:37:19.097 回答
66

这是我找到的最佳解决方案：http: //jsfiddle.net/yWnZ2/446/适用于 Chrome、Firefox、Safari、IE8-11 和 Edge。

如果你有一个声明的height( height: 1em, height: 50%, 等等) 或者它是一个浏览器知道高度的元素 ( img, svg, 或者canvas例如), 那么你需要的垂直居中是这样的：

.message {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

您通常需要指定 awidth或max-width以便内容不会拉伸屏幕/容器的整个长度。

如果您将它用于您希望始终在视口中居中与其他内容重叠的模式，请使用position: fixed;这两个元素而不是position: absolute. http://jsfiddle.net/yWnZ2/445/

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

于 2013-08-07T14:44:08.270 回答
25

编辑：现在是 2020 年，我会改用弹性框。

原答案：

html

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

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
于 2015-07-19T19:23:01.847 回答
10

我知道这个问题来自 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; 
}
于 2014-09-17T17:21:17.570 回答
8

如果您知道要居中的 div 的高度，则可以将其绝对定位在其父级中，然后将top值设置为50%. 这将使子 div 的顶部下降其父级的 50%，即太低。margin-top通过将其设置为其高度的一半将其拉回。所以现在你的子 div 的垂直中点位于父 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/

于 2012-09-13T23:19:34.090 回答
4

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

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

您需要设置“最小高度”以防内容超过窗口高度的 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/

我更喜欢精确内容居中的表格解决方案，但在某些情况下，相对绝对定位会做得更好，特别是如果我们不想保持内容对齐的精确比例。

于 2015-09-01T11:15:32.617 回答
3 

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

于 2017-07-04T12:30:21.603 回答
1

没有一种简单的方法可以使 div 垂直居中，这在每种情况下都能奏效。

但是，根据情况有很多方法可以做到这一点。

以下是其中几个：

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

您也可以在 Google 上搜索“css 垂直居中”

于 2012-09-13T22:42:16.350 回答
1

使用弹性盒：

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 */
}

查看结果

于 2016-08-09T12:50:11.560 回答
1

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

.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;
}
<div class="black">
<div class="message">
    This is a popup message.
</div>

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

于 2017-04-07T19:52:57.877 回答
1

我认为你可以用 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>

于 2020-10-06T10:24:47.017 回答
1 

.black {
    position:absolute;
    /*
        Replace with a one line inset property.
    top:0;
    bottom:0;
    left:0;
    right:0;
    */
    inset: 0;
    background:rgba(0,0,0,.5);
    /*
        Since no one has mentioned it yet,
        here it is the grid display and
        the place-content property.
    */
    display:grid;
    place-content: center;
}
.message {
    background:yellow;
    width:200px;
    /*
        There's no point here.
    margin:auto auto;
    */
    padding:10px;
}
<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

于 2022-01-08T09:35:21.507 回答
-1 
.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>
于 2020-04-12T14:51:27.257 回答