如何垂直对齐包装器，使其居中在（移动）屏幕上？答案

【问题标题】：How do I vertically align my wrapper so it will be centered on a (mobile) screen?如何垂直对齐包装器，使其居中在（移动）屏幕上？
【发布时间】：2013-02-28 05:57:55
【问题描述】：

我正在练习使网页响应移动屏幕分辨率。我成功的宽度。我如何管理这个高度？我的包装器继续保持在顶部而不是垂直对齐。

我已经看到很多关于这个问题的问题，但还没有在我的 css 上找到指定的解决方案。希望有人可以帮助我。

HTML

<body>
  <div class="wrapper">
    <div class="header">
    </div>
    <div class="content">
      <a href="http://test"><div id="topleftbox"></div></a>
      <a href="http://test"><div id="toprightbox"></div></a>
      <a href="http://test"><div id="bottomleftbox"></div></a>
      <a href="http://test"><div id="bottomrightbox"></div></a>
    </div>
  </div>

CSS

    body {

    }

    .wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    }

    .header {
    min-width: 50%;
    height: 20px;
    }

    .content {
    min-width: 500px;
    width: 40%;
    height: auto;
    margin: 0 auto;
    }

    #topleftbox {
    background: url(..);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: left;
    }

    #toprightbox {
    background: url(...);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: right;
    }

etc.

【问题讨论】：

标签： html css css-float vertical-alignment

【解决方案1】：

要使用display:table-cell;，您需要模拟完整的表结构。幸运的是，您不必添加任何额外的标记，因为您可以针对 html 和 body 标签设置样式：

html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

注意：这垂直居中.wrapper的内容，而不是div本身。

【讨论】：

【解决方案2】：

您可以使用display:table 来呈现您的 DIV，例如表格和表格单元格。

【讨论】：

【解决方案3】：

与水平居中不同，从来没有一种 CSS 方法可以垂直居中。唯一的方法是使用 javascript 获取“window.innerHeight”，然后将 HTML 元素（包装器）的高度添加到其中并将总数分成两半。并将其设置为新的顶部位置。

此外，您的“包装器”的高度为 100%，这应该意味着它填满了整个屏幕高度。如果它与屏幕高度相同，它将不会居中。它的宽度也为 100%，我怀疑“margin: 0 auto”有什么作用。

【讨论】：

【解决方案4】：

CSS 中的垂直对齐有几个选项：

1.通过表格单元。（这在 IE8+ 中确实有效）

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

2。 line-height = 元素的高度（如果你有超过一行的文字，我想这看起来很时髦）

{
    height:10em; 
    line-height:10em;
}

您可以找到更多选择，但我相信display: table 应该是您现在最好的选择。

http://www.zann-marketing.com/.../vertically-centering-text-using-css.html https://stackoverflow.com/questions/2939914/

【讨论】：