显示table可以在Chrome居中，但是firefox不显示在居中

Question

我想要 div 在中心 垂直和水平 和 display:table，它在 chrome 中工作得很好但是Firefox 显示不正确。

div ID 是 #content:

#content {
    background: red;
    width: 367px;
    height: 441px;
    display: table;
}

.centered {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

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

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

显示table可以在Chrome居中，但是firefox不显示在居中

display table can be center in Chrome, but firefox does not show it in center

html

css

firefox

google-chrome