7

我需要将 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 解决方案，因为我不想每次 div 内容更改时触发 JS .

4

4 回答 4

4

您可以在 CSS 表格的帮助下垂直居中一个未知高度的盒子。盒子的高度由它的内容决定。请参阅此演示，该演示使用 box 的position: fixed属性。盒子的宽度也设置好了。

这是 IE <= 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;
}

这符合您的要求吗？

于 2012-05-20T17:28:03.400 回答
2

如果您正在使用位置，则变换属性在这里会很有帮助。

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

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

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

于 2017-04-19T11:00:23.387 回答
1

看演示（高度未知，宽度已设置）。

您可以使用 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 <=7 的解决方法（因为 IE <=7 不知道 table | table-cell）？

于 2012-05-20T08:31:57.063 回答
0

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

注意：我添加z-index:-1;到 centerbase 类。您可能需要根据您的设计进行调整。

<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>
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&lt;/div>

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

于 2012-05-20T06:31:38.873 回答