Question

我想要div水平和垂直居中。

对于横向问题，一切都很好，但我对垂直对齐有问题。

我试过了：

#parent {
    display: table;
}

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

但这不起作用。

Answer 1

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

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

如果您必须支持较旧的浏览器，则可以使用这些浏览器的组合，但由于渲染block与table的差异，它们可能会很麻烦。

#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

Answer 2

将父属性设为display:table，子属性为display: table-cell和vertical-align: middle为我工作。

Answer 3

首先，将非表标记视为表（使用display：table和friends）不是跨浏览器。我不知道你需要支持哪些浏览器，但肯定IE6不会这样做。但是，如果你的目标浏览器所有支持显示：表格，我可以给你一些提示。

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

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

可以使用没有周围表格行和表格的表格单元格，浏览器会为您推断出所需的表格包装元素。

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

Answer 5

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

这应该是您的 html：

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

这是带有 css 的 flexbox：

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

这是代码笔：https://codepen.io/bongardabo/pen/YzZQgaJ

如何垂直居中div？

5 个答案: