垂直对齐固定大小的 Div答案

【问题标题】：Vertically Align Fixed Size Div垂直对齐固定大小的 Div
【发布时间】：2014-05-14 19:32:16
【问题描述】：

我已阅读 Stackoverflow 上与此主题相关的所有其他问题，但似乎没有一个可以解决我的问题。

我的页面顶部有一个导航栏，它固定在左上角，然后在中间有一个 div，其中包含图像和一些文本。

我的内容是这样的：

<div class="center">
    <div id="logo">&nbsp;&nbsp; <a class="home" href="index.html"> <img class="noborder" src="images/logocat.png" alt="" /> </a> 
    </div>
    <div id="top">
        <p class="toptext">TEXT</p>
    </div>
    <div id="contact">
        <table border="0" align="center">
            <tr>
                <td><a href="http://be.net/crookedcartoon"></td>
              <td><p class="contact-text1"> CROOKEDCARTOON@GMAIL.COM </p>
                <p class="contact-text2"> Alex: TEXT </p></td>
              <td><a href="2014.html"><img class="noborder" src="images/seriesindex.jpg" onmouseover="this.src='images/serieshover.jpg'" onmouseout="this.src='images/seriesindex.jpg'" alt="" /></a>
                </td>
            </tr>
        </table>
    </div>
    <div id="about">
        <p class="content-text-index">TEXT</p>
    </div>
</div>

提到的div 的 CSS 是：

.center {
    height: 984px;
    width: 504px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-492px;
    margin-left:-257px;
    padding:0px;
}

它不会垂直或水平居中，这个 div 周围没有 div 或包装器，或任何冲突的 css（据我所知），这变得很痛苦。

谁能提出解决办法？我已经尝试过半边距/宽度等想法，这就是上面显示的内容。

【问题讨论】：

为什么要使用表格布局？
因为我在这里读到的票数最高的技巧说绝对定位，固定高度和宽度+边距是这些值的一半，这将是使 div 居中的最佳方式，而不管浏览器大小如何.这些表格与问题无关，但是一旦解决，我现在正在更新它。
我注意到您在 CSS 中使用 #center 而不是 '.center`。会这样吗？
是的，这是一个关于类/ID的愚蠢混淆，但它肯定没有奏效，它创造了这个：crookedcartoon.co.uk/index.html
您之前的 CSS 是正确的。您所要做的就是将#center 更改为.center 顺便说一句，<center> 元素已被弃用。您应该只使用 div。

标签： html css alignment center

【解决方案1】：

我注意到您在 CSS 中使用 #center 而不是“.center”。

.center { /* as you have used a class in your HTML */
    height: 984px;
    width: 504px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-492px;
    margin-left:-257px;
    padding:0px;
}

【讨论】：

是的，这是一个愚蠢的错误，但没有解决任何问题。
如果你使用 flexbox 和你看起来一样，它不会工作。请参阅jsfiddle.net/Paulie_D/4JMyS/3 - 我只是更改了高度等以便于查看。
我只是使用其中一个，两者都提供了不同的结果，左上角或右上角。
那你肯定有别的事情发生了。也许您可以制作自己的 JSfiddle 示例，以便我们查看整个代码。
这是我的 Jsfiddle：jsfiddle.net/d6a6c 但是如果没有图像就很难看到。可以在此处查看实际站点本身：crookedcartoon.co.uk/index.html

【解决方案2】：

好吧，忘记一切，只使用这个 CSS

html, body{ height: 100%; }

.center {
    height: 984px;
    width: 504px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -492px;
    margin-left: -257px;
    padding:0px;
}

如果它有效，请告诉我。

使用 CSS 弹性框：http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

.center {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

您可以使用 CSS flex-box。对于旧版本的 IE，您需要使用这个 jquery 解决方案 http://dipaksblogonline.blogspot.in/2011/02/div-content-vertical-align-centermiddle.html

或使用显示：表格；属性CSS to vertically align text to middle of div

【讨论】：

是的，这是一个愚蠢的错误，但它肯定不能解决问题，这是它创建的：crookedcartoon.co.uk/index.html
Flexbox 是另一个选项不是必需的。
我知道，我尝试了这两个选项，但都没有工作，它仍然在右上角居中，至于 webkit flex-box 选项它使它飞到左上角角落。
您似乎与我的 CSS 和简化代码一起使用的编辑与 jsfiddle 的展示一样完美，但由于某种原因，当实施到我的网站时，它使 div 位于右上角，可以div中项目的css属性会影响这个吗？
@user3494604 检查编辑 - html, body{ height: 100%; } 可能是解决方案。

【解决方案3】：

您可以应用幻影元素来填充父元素的 100% 高度。

.wrap {
  text-align: center;
  height: 500px;
  background: #d4d4d4;
}

.wrap:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.center {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

对于这样的标记：

<div class="wrap">
  <div class="center">...</div>
</div>

一个例子：http://jsfiddle.net/LayyM/

【讨论】：

这只是让 div 飞到左上角，我不知道为什么。