Question

我需要将DIV居中放在屏幕中央，水平和垂直，我不知道DIV大小，div是position:fixed;。

这种负边缘技巧不起作用，因为我不知道div的大小。 top:50%; left:50%; magin-top:-100; margin-left:-100;

margin-left: auto; margin-right: auto;不起作用，因为不能使用position:fixed;而margin-top:auto; margin-bottom:auto;也不会垂直居中;

我发现这种方法：display: table-cell; vertical-align: middle;不工作以太;

我知道如何使用JavaScript使用getComputedStyle来获取div内容大小，并做数学来修复它的位置，但我想要一个纯CSS解决方案，因为我不想每次触发一个JS我的div内容发生了变化。

Answer 1

您可以借助css表垂直居中一个未知高度的盒子。盒子的高度由其内容决定。查看使用 position：fixed 属性的demo框。框的宽度也设置为。

这是IE＆lt; = 7：

的解决方法

#table {
  height:100%;
  text-align:center;
  white-space: nowrap;
}
#container {
  display: inline;
  zoom: 1;
  text-align: left;
  vertical-align: middle;
}
#IEcenter {
  height: 100%;
  width: 1px;
  display: inline;
  zoom: 1;
  vertical-align: middle;
}
#container * {
  white-space: normal;
}

这是否符合您的要求？

Answer 2

如果您正在使用职位，转换属性将在这里有所帮助。

您只需将以下属性添加到必须居中的元素

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%);

请删除添加到元素中的额外边距和填充。

Answer 3

查看demo（身高未知，宽度已设定）。

您可以使用css表（在此示例中，html是表，而body是表格单元格）。标记：

<body>

    <div id="container">
        <h1>Lorem ipsum</h1>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>

</body>

CSS：

html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: table;
}
body {
  margin: 0;
  padding: 0;
  display: table-cell;
  vertical-align: middle;
}
#container {
  width: 400px;
  margin: 0 auto;
  background: #ffea00;
  border: 2px solid #ff9800;
}

您是否需要针对IE＆lt; = 7的解决方法（因为IE＆lt; = 7不知道table | table-cell）？

Answer 4

这样的事情会起作用吗？它也使用display: table-cell，但它需要2个div标签才能工作......指定了display: table样式的父标签。

注意：我已将z-index:-1;添加到中心基类。您可能希望根据您的设计进行调整。

<style>
.centerbase{
    display: table; 
    vertical-align: middle;
    height:100%;
    width:100%;
    text-align:center;
    position:fixed;
    z-index:-1;
}
.centerpane{
    display: table-cell; 
    vertical-align: middle;
}
</style>
<div class="centerbase">
    <div class="centerpane">
        <img src="https://www.google.com/images/srpr/logo3w.png" />
    </div>
</div>

如果您需要在centerpane中添加未对齐的文本，可以在centerpane中添加另一个div，并将样式指定为：text-align:left; width:400px; margin:0px auto;您必须为此额外div指定宽度。

如何在屏幕上水平和垂直居中未知大小的DIV

4 个答案: