Вертикально содержимое центра для разных окон браузера

Question

У меня проблема с двумя бок о боками, вертикально центрированными на моем сайте. Это логотип с абзацем текста рядом с ним, и я хочу, чтобы они были горизонтально и вертикально центрированы, но я не могу понять это в этом конкретном случае. Я прикрепил скрипку и ссылку на фактический сайт ниже.

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

Я изменил эти 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/

Недостатком этого метода является то, что вам нужно использовать фиксированную ширину и высоту для центрированного элемента.

Answer 2

Я не совсем уверен, какой макет вы пытаетесь архивировать, но следующего примера может быть достаточно для вас.

Я использую таблицу CSS для центрирования.

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

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