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

您可以应用ghost元素来填充父元素的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 to vertically align text to middle of 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;
}

垂直对齐固定大小的Div

3 个答案: