div { 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); -ms-transform: -50%， -50%;/*即9 */ -webkit-transform (-50%， -50%);/* Chrome, Safari, Opera */ ｝ <身体> <div> div要垂直对齐 < /身体>

位置:主体文档中的绝对div

有位置的元素:绝对的;相对于最近的定位祖先(而不是相对于视口(主体标记)，像固定的那样)定位。

然而;如果绝对定位元素没有定位父元素，它将使用文档主体，并随着页面滚动而移动。

来源:CSS位置

这个解决方案对我很有效

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(或高度:70% /底部:15%

高度:40% /底部:30%…)

最好和最灵活的方式

这个演示的主要技巧是，在元素从上到下的正常流中，因此margin-top: auto被设置为零。然而，绝对定位元素对于自由空间的分布具有相同的作用，并且类似地可以在指定的顶部和底部垂直居中(在IE7中不起作用)。

这个技巧适用于任何大小的div。

div { 宽度:100 px; 身高:100 px; 背景颜色:红色; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; ｝ < div > < / div >

如果你正在研究新的浏览器(IE10+)，

然后你可以使用transform属性在中心对齐一个div。

<div class="center-block">this is any div</div>

这个的css应该是:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

这里的问题是，您甚至不必指定div的高度和宽度，因为它会自行处理。

同样，如果你想把一个div放在另一个div的中心，那么你可以指定外部div的相对位置，然后这个CSS开始为你的div工作。

工作原理:

当您将left和top指定为50%时，div将位于页面的右下四分之一，其左上端固定在页面的中心。 这是因为，左/顶部属性(当以%给出时)是基于外部div(在您的情况下，窗口)的高度计算的。

但是transform使用元素的高度/宽度来决定转换，因此div将向左移动(50%宽度)和向上移动(50%高度)，因为它们是以负号给出的，因此将其对齐到页面的中心。

如果你必须支持旧的浏览器(抱歉，包括IE9)，那么表格单元格是最流行的方法。

div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

调整左侧和顶部的宽度和高度，即(100% - 80%)/ 2 = 10%

这里还有一个方法(防弹)，利用“display:table”规则:

标记

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}