垂直对齐固定大小的分度

Question

我已经阅读了有关此主题的所有其他关于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（据我所知），这正变得很痛苦。

任何人都可以提出修复建议吗？ 我已经尝试了半边距/宽度等想法，这就是上面显示的内容。

Answer 1

您可以应用重影元素以填充父元素高度的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/

Answer 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 flex-box： 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

或使用display：table; 属性CSS，可将文本垂直对齐到div的中间

Answer 3

我注意到您在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;
}