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

Posted 2023-03-05

【中文标题】在另一个 div 中垂直居中一个 div [重复]

【英文标题】：Vertically centering a div inside another div [duplicate]

【发布时间】：2011-09-23 07:58:13

【问题描述】：

我想将另一个 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;边距底部：自动；

jsfiddle.net/k6ShD/4

这里有两种简单的方法可以让 div 在 div 中居中，垂直居中，水平居中或两者兼而有之（纯 CSS）：***.com/a/31977476/3597276

别人给的建议是对的。只是补充。如果你有名为 DivParent 的父 div 和名为 ChildDiv 的子 div，那么只需将 margin: auto 添加到子 div，这将使 childDiv 或 innerDiv 在 ParentDiv 的中心。

【参考方案1】：

tl;dr

垂直对齐中间有效，但您必须在父元素上使用table-cell，在子元素上使用inline-block。

此解决方案不适用于 IE6 和 7。您的解决方案更安全。 但由于您使用 CSS3 和 html5 标记了您的问题，我认为您不介意使用现代解决方案。

经典解决方案（表格布局）

这是我最初的答案。它仍然可以正常工作，并且是获得最广泛支持的解决方案。表格布局将impact your rendering performance，因此我建议您使用更现代的解决方案之一。

Here is an example

---

测试于：

FF3.5+ FF4+ Safari 5+ Chrome 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;

---

现代解决方案（转换）

由于转换是fairly well supported now，因此有一种更简单的方法。

CSS

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


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

Demo

---

♥我最喜欢的现代解决方案（flexbox）

我开始越来越多地使用 flexbox its also well supported now 这是迄今为止最简单的方法。

CSS

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

Demo

更多示例和可能性： Compare all the methods on one pages

【讨论】：

+1 如果不需要居中文本，OP 是否需要将任何文本包装在另一个容器中？

虽然这确实有效，但它可以作为一个清晰的例子来说明为什么 CSS 存在如此大的缺陷。像这样简单的事情不应该需要纠缠和变通。

在父元素中包含display: table; 有多重要？

是的，你的例子是正确的。我在谈论您答案中的代码（此处）。您似乎有“位置：flex”，这似乎不是有效的 css 属性。

经过 3 个小时的摆弄并试图显示 div 垂直对齐后，这个答案结束了我的挫败感。该 flex 示例运行良好，并且由于客户使用 IE11/Chrome，我可以毫无问题地使用它。非常感谢！

【参考方案2】：

对于没有指定高度值的innerdiv，没有纯css解决方案使其垂直居中。一个javascript解决方案可以获取innerdiv的offsetHeight，然后计算style.marginTop。

【参考方案3】：

我知道这个问题是在一年前提出的... 无论如何感谢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;
 

【讨论】：

这在 Safari 中似乎不起作用。

这仅适用于使用 Mozilla 框架的浏览器（例如 Firefox）。提供/使用不适合跨浏览器的代码是不好的做法。

【参考方案4】：

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

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

(Reference)

【讨论】：

+1，但奇怪的是它取决于位置的顺序。开始 bottom: 0; left: 0; 让内部 div 卡在父级的底部（Chrome 33，无论如何）。

在我的情况下，在您希望 div 对齐的方向定义 0，在搜索表单字段中它是 .search-header margin:auto; top:0px; bottom:0px; right:0px; 没有分配“左”以继续前一个的顺序和位置

而且不需要精确定位父 div 的位置

我会说这是最好的解决方案，但只有当你的内部元素的高度可以预先指定时。例如，这使得它不适合垂直居中流动文本。

不适用于左侧，始终与左侧对齐（OS/X Chrome 66.0.3359.117）

【参考方案5】：

与其将自己与难以编写和难以维护的 CSS 纠缠在一起（这也需要仔细的跨浏览器验证！）我发现放弃 CSS 并改用非常简单的 HTML 要好得多1.0：

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

这完成了原始发布者想要的一切，并且健壮且可维护。

【讨论】：

大多数人认为这不是一个好的做法，我同意。像“table”这样的标记元素不应该用于布局。如果您实际显示的是表格数据，请使用表格。

如果您重视风格而不是可维护的代码，那么您的担忧是有效的。其他人可能会以不同的方式权衡这两个因素，他们应该会看到所有选项。

我认为这个解决方案非常棒，绝对可以跨浏览器

尽管有 CSS 纳粹分子和他们对表格的仇恨，但我发现这个解决方案比堆积依赖表格单元格格式的神秘 CSS 指令要好得多。当前状态下的 CSS 根本无法正确处理。

一票暗示 css 正在堆积一堆变通方法（至少在术语上）来实现这个简单的事情。对于开发人员来说，这绝对是一个更易于管理的解决方案，我希望将来不再需要它。

【参考方案6】：

一年多以来我一直在使用以下解决方案，它也适用于 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>

【参考方案7】：

您可以使用简单的 javascript (jQuery) 块来完成此操作。

CSS：

#outerDiv
    height:100%;

Javascript：

<script type="text/javascript">
    $(document).ready(function () 
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    );
</script>

【参考方案8】：

另一种方法是使用转换翻译

Outer Div 必须将其position 设置为relative 或fixed，并且Inner Div 必须将其position 设置为absolute、top 和left 至50% 并应用@ 987654330@.

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

（至少 4 个，带有 -webkit- 前缀）

Firefox 31.0

（最低 3.6 带 -moz- 前缀，16 不带前缀）

Chrome 36

（至少 11 个带 -webkit- 前缀，36 个不带前缀）

IE 11, 10

（最少 9 个带 -ms- 前缀，10 个不带前缀）

More browsers, Can I Use?

【讨论】：

这段代码最好的部分是它与全宽外部 div 完美搭配。干得好！

我知道我们需要使用transform: translate(-50%, -50%); 来真正使div 居中，但为什么单独使用top:50% 和left:50% 不起作用？有人可以解释一下吗？

@KevinChandra，我认为top 和left 指的是容器尺寸，translate 指的是内容大小。希望有帮助！

【参考方案9】：

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

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

这也是float的好选择，祝你好运！

【讨论】：

你的答案与水平居中有关；问题是关于垂直居中

【参考方案10】：

Vertical Align Anything with just 3 lines of CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

最简单

.element 
  position: relative;
  top: 50%;
  transform: translateY(-50%);

CSS

.parent-of-element 
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */


.element 
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);

根据shouldiprefix，这是您唯一需要的前缀

您也可以使用 % 作为 .parent-of-element 的 'height' 属性的值，只要元素的父级具有高度或扩展其垂直大小的某些内容即可。

【讨论】：

无法告诉你原因，但在我的情况下，当我在 translateY 上使用 (50%) 而不是 (-50%) 时，效果非常好...

我喜欢这种优雅的解决方案。唯一的问题是，如果用户将他们的浏览器压缩到 100px 高（例如），我会丢失居中 的顶部，这对我来说是个问题，因为出于美学/设计原因我希望我的标题在那里。不过说实话：我非常喜欢这个解决方案，我什至不确定我是否在乎！

KjetilNordin，根据您的布局，当您使用 50% 而不是 -50% 时，它有时会起作用。但是只要居中元素的容器有高度，-50% 就可以完美地工作。

【参考方案11】：

我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度，并将其与其他内容垂直对齐的技巧。 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;

【讨论】：

6年后，这是最好的解决方案！

【参考方案12】：

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

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

当然还有：

position: absolute;

【讨论】：

它是垂直的而不是水平的

【参考方案13】：

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

【参考方案14】：

您可以使用 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>

【参考方案15】：

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

【参考方案16】：

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

这里有两个简单的例子来说明如何实现它。

Using display: table-cell

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

Using flex-box (display: flex)

.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 的浏览器兼容性。

【参考方案17】：

enter image description here 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/

【讨论】：

这很好用

【参考方案18】：

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

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

【参考方案19】：

这将回到 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>

【参考方案20】：

您可以通过简单地添加下面提到的 css 样式来做到这一点。大多数浏览器都支持这一点。您可以查看here 以获取浏览器支持。一切顺利。如有任何疑问，请发表评论

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

【参考方案21】：

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

【参考方案22】：

垂直和水平居中对齐：

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


#child 
     display:table-cell;
     vertical-align:middle;

【参考方案23】：

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

【参考方案24】：

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

当子div相对于父div绝对定位时，我们可以使用calc()函数来控制子div的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>

输出：