不同浏览器的内容垂直居中 windows

Question

我在让两个并排的 div 在我的网站上垂直居中时遇到问题。这是一个旁边有一段文字的标志，我希望它们水平和垂直居中，但我无法弄清楚这个特殊情况。我已将 fiddle 和 link 附加到下面的实际站点。

HTML:

<div class="content">
   <div class="left">
      <img src="images/mark.png" alt="Civilians Stamp"/>
   </div>
   <div class="right">
      <p>Civilians is a Cape Town based film collective creating original content across multiple platforms.</p>
      <p>The collective is made up of Writers, Directors & Producers creating original content for film and television. </p>
   </div>
</div>

CSS:

.content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.left {
    float: left;
    width: 30%;
    margin: 0 auto;
    padding-top: 20%;
    padding-left: 10%;

}

.left img {
    max-width: 200px;
    width: 100%;
    float: left;
}

.right {
    float: right;
    width: 50%;
    margin: 0 auto;
    margin-right: 10%;
    margin-top: 19.2%;
}

.right p {
    font-family: 'proxima-nova', sans-serif;
    font-weight: 500;
    line-height: 210%;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: justify;
    float: left;
}

http://jsfiddle.net/wfx7srea/

http://civilians.co.za/home.html

如果能帮上忙，那就太好了！

Answer 1

我不确定您要实现的布局是什么，但以下示例足以让您开始。

我正在使用 CSS table 居中。

https://jsfiddle.net/wfx7srea/1/

.content {
  display: table;
}
.left {
  display: table-cell;
  vertical-align: middle;
}

Answer 2

我把这3个CSS改成了水平和垂直对齐内容。

.content {
    width: 825px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.left {
    float: left;
    margin: 0 auto;
    text-align: right;
}

.right {
    float: left;
    width: 75%;
    margin: 0 auto;
}

这是最终结果：https://jsfiddle.net/wfx7srea/3/

这种方法的缺点是您需要为居中元素使用固定的宽度和高度。

不同浏览器的内容垂直居中 windows

Vertically center content for different browser windows

html

css

vertical-alignment

centering