【问题标题】:How to center a div vertically?如何使div垂直居中?
【发布时间】:2011-05-23 21:37:51
【问题描述】:

我有一个div,我想水平和垂直居中。

对于水平问题,一切都很好,但我在垂直对齐方面遇到了问题。

我试过了:

#parent {
    display: table;
}

#child {
    display: table-row;
    vertical-align: middle;
}

但这不起作用。

【问题讨论】:

标签: html css


【解决方案1】:

如果您只需要支持支持transform(或其供应商前缀版本)的浏览器,请使用这个奇怪的老技巧来垂直对齐元素。

#child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

如果您必须支持较旧的浏览器,您可以结合使用这些浏览器,但由于 blocktable 的渲染差异,它们可能会很痛苦。

#parent {
    display: table;
}

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

如果你的身高是固定的,并且你需要支持那些非常老的、讨厌的浏览器......

#parent {
   position: relative;
}

#child {
   height: 100px;
   position: absolute;
   top: 50%;
   margin-top: -50px;
}

如果你的身高不固定,有workaround

See it on jsFiddle.

【讨论】:

  • 非常感谢我的朋友,但只有当我知道#child 身高是多少时才有效......但它并不总是一样,竖起大拇指!感谢您的有用回答!
  • @From.ME.to.YOU 请参阅workaround。不幸的是,IE6+7 需要额外的容器。
【解决方案2】:

父属性为display:table,子属性为display: table-cellvertical-align: middle 为我工作。

【讨论】:

    【解决方案3】:

    首先,将非表格标记视为表格(带有 display:table 和朋友)不是跨浏览器。我不知道您需要支持哪些浏览器,但 IE6 肯定不会这样做。但是,如果你的目标浏览器都支持 display:table 我可以给你一些提示。

    您正在寻找的垂直居中方法(使用表格布局)取决于具有垂直对齐:中间的 TD,然后在其中单个块元素将垂直居中。所以我认为你想要的是:

    #parent { display:table-cell; vertical-align:middle; }
    #child { /* nothing necessary, assuming it's a DIV it's already display:block */ }
    

    可以使用没有环绕表格行和表格的表格单元格,浏览器会为您推断所需的表格包装元素。

    【讨论】:

      【解决方案4】:

      这是另一种方法,当您不知道内部 div 大小或其他什么时,您可以在这里和那里使用 % 来修复“居中” ....

      这个想法是您的最高值是子元素高度的一半,以创建居中错觉

      代码如下:

      <div id="parent">
          <div id="child">
                  hello
          </div>
      </div>
      

      对于样式:

      #parent {
         position: relative;
          height: 300px;
          width:200px;
          background-color:green;
      }
      
      #child {
         height: 50%;
         width: 50%;
          position:relative;
          top:25%;
          left:25%;
         background-color:red;
      }
      

      在这里您可以看到它的实际效果 http://jsfiddle.net/Wabxv/

      【讨论】:

      • 请注意,这将使 div 在剩余的可用空间中居中(如果父 div 有一些文本,这种方式将在剩余空间中居中,而不是整个父项大小...使用绝对定位)
      【解决方案5】:

      您可以使用flexbox 将您的孩子div 在父div 中水平或垂直居中:

      这应该是你的 html:

      <div id="parent">
         <div id="child">
            info
         </div>
      </div>
      

      这是cssflexbox

      #parent{
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         width: 100%;
         height: 100vh;
         background: lightgray;
      }
      #child{
         position: relative;
         background: black;
         padding: 2rem;
         color: white;
         box-shadow: 5px 5px 20px rgba(0,0,0,.4);
         border-radius: 5px;
      }
      

      这里是de codepen:https://codepen.io/bongardabo/pen/YzZQgaJ

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-09-16
        • 2011-05-25
        • 2011-07-07
        • 1970-01-01
        • 2012-06-03
        • 2013-03-11
        • 2014-02-15
        • 1970-01-01
        相关资源
        最近更新 更多