Question

我有这个简单的HTML代码，但让我感到沮丧，因为它不能垂直居中：

<div class="outer">
    <div class="inner">
        Hello World
    </div>
</div>

这是我的CSS：

.outer {
    position: relative;
    height: 350px;
}

.inner {
    position: absolute;
    height: 100px;
    top: 50%
}

.inner div实际上是垂直居中，但基于它的顶部。因为top: 50%，我想要的是这个.inner div真正垂直居中于.outer之上。怎么做？

Answer 1

即使您不了解尺寸，也可以使用css3对元素进行居中。

.inner {
    position: absolute;
    height: 100px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Answer 2

由于您知道两个元素的高度，因此您可以将顶部设置为top: 125px;

（350 - 100）/ 2.

使用JQUERY更新 http://jsfiddle.net/yf0ncd7f/

Answer 3

您可以通过line-height属性设置它，将其设置为div的高度，就像在代码中一样line-height: 100px;

＆＃13;

.outer {
    position: relative;
    height: 350px;
    background: gray;
}

.inner {
    position: absolute;
    height: 100px;
    line-height: 100px;
    background: blue;
}

＆＃13;

<div class="outer">
    <div class="inner">
        Hello World
    </div>
</div>

＆＃13;

Answer 4

您可以使用此CSS技巧使div垂直居中（也可选择水平居中）。这适用于任何高度和宽度的父div，只要它们被指定。

.inner {
    position:absolute;

    // The height and width of the element have to be set for this to work
    height:100px;
    width:100px;

    // Setting the top and bottom to 0px as well as the margins to auto
    // causes the div to be centered vertically.
    top: 0px;
    bottom: 0px;
    margin-top: auto;
    margin-bottom: auto;

    // To also center the div horizontally, do the same for
    // left, right and the margins.
    left: 0px;
    right: 0px;
    margin-left:auto;
    margin-right:auto;
}

注意此解决方案仅在事先知道父div的高度并且已指定时才有效。因此，父元素需要height:100px或您需要的任何像素数量。此外，高度不能为百分比，这意味着如果父div的高度声明为height:50%，则 NOT 工作。

内部div实际上可以有一个

Answer 5

实际上，将绝对div居中的简单方法是使用margin：auto;

section {
  width: 100%;
  height: 800px;
  position: relative;
  
  background: #eee;
}
div {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  
  background: orange;
}

<section>
  <div></div>
</section>

Answer 6

我添加了边框以明确区分这是你想要的吗？

http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview

.outer {
  position: relative;
  height: 150px;
  border : 1px solid #f00;
}

.inner {
  position: absolute;
  height: 80px;
  top:0;
  bottom:0;
  margin:auto;
  border : 1px solid #0f0;
}

垂直对齐中心的绝对div

6 个答案: