Question

我希望div在中心垂直和水平与display:table，并且它在Chrome中工作得非常好，但Firefox没有正确显示。

div ID为#content：

＆＃13;

#content {
    background: red;
    width: 367px;
    height: 441px;
    display: table;
}

.centered {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

＆＃13;

<div id="content" class="centered">
  <img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo">
</div>

＆＃13;

jsfiddle

Answer 1

如果您可以使用CSS3，请使用transform:translate

请参阅fiddle

Answer 2

这应该有效

#content {
  margin-right: auto;
  margin-left: auto;
  position: relative;
  top: 50%;
  transform: translateY(+50%);
}

Answer 3

对于css2，您可以使用table-cell来集中内容：

    #content {
        background: red;
        width: 640px;
        height: 441px;
        display: table-cell;
    	vertical-align: middle;
    	text-align: center;
    }

    <div id="content" class="centered">
      <img src="https://www.google.com/images/srpr/logo11w.png" id="img-logo" alt="Google logo">
      <div>test</div>
    </div>

如果您希望将#content置于页面中心，请添加此css：margin: 0 auto;

请参阅http://www.w3.org/Style/Examples/007/center.en.html

显示表可以在Chrome中居中，但firefox不会在中心显示

3 个答案: