如何垂直居中所有浏览器的div？

2018-05-29 07:42:03

我想用CSS垂直居中div 。我不想要表或JavaScript，但只有纯CSS。我找到了一些解决方案，但都缺少对Internet Explorer 6的支持。

<body>
    <div>Div to be aligned vertically</div>
</body>

如何在所有主流浏览器（包括Internet Explorer 6）中垂直居中div ？

下面是我可以建立的最好的全方位解决方案，以纵向和横向居中固定宽度， 灵活的高度内容框。它已经过测试，可用于最新版本的Firefox，Opera，Chrome和Safari。

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

还有一个我在列表中看不到：

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

跨浏览器（包括Internet Explorer 8 - 无需黑客的Internet Explorer 10！）

响应百分比和最小/最大值 -

无论是填充（无框尺寸！），都居中

height必须声明（请参阅变量高度）

推荐设置overflow: auto防止内容溢出（请参阅溢出）

来源：CSS中的绝对水平和垂直居中

最简单的方法是以下3行 CSS：

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

以下是一个例子：

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

链接地址: http://www.djcxy.com/p/1093.html

上一篇: How to vertically center a div for all browsers?

下一篇: How to align checkboxes and their labels consistently cross