Укладка трех divs и центрирование их по вертикали?

Question

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

В принципе, я строю небольшой портфолио и хотел бы, чтобы он был выложен в формате из двух столбцов. В левом столбце будет размещен мой логотип, а в правом столбце будет три строки, которые я бы хотел поместить вертикально, а затем и в центр. Я не могу для жизни меня, выяснить CSS, чтобы заставить это работать. Вот то, что я до сих пор:

<div class="row main"> 
     <div class="col-xs-6 leftMain"> 
      <img src="img/logo.png" class="logo" alt="myName"> 
     </div> 
     <div class="col-xs-6 rightMain"> 
      <div class="resume button"><a href="resume.html" class="btn">Resume</a></div> 
      <div class="portfolio button"> <a href="portfolio.html" class="btn">Portfolio</a></div> 
      <div class="contact button"><a href="mailto:me@me.com" class="btn">Contact</a></div> 
     </div> 
    </div> 

И мой CSS:

.main { 
    display: flex; 
} 

.leftMain { 
    display: inline-block; 

} 

.rightMain { 
    display: inline-block; 

} 

.logo { 
    display: table; 
    margin: 0 auto; 
} 

.button { 
    display: table; 
    margin: 0 auto; 
} 

Это работает достаточно хорошо, но ссылки в rightMain не центр по вертикали. Поскольку большинство решений, которые я искал, включают свойство отображения, я подумал, что могу просто задать полный вопрос, а не пытаться интегрировать несколько решений для различных проблем с центрированием. Я планирую сделать его отзывчивым в конечном счете, имея правый столбец, перемещающийся слева на меньших окнах. Есть идеи?

Answer 1

Попробуйте это: http://jsfiddle.net/89jyvow0/3/

Fullscreen: http://jsfiddle.net/89jyvow0/3/show/

Css:

* { 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    min-width: 500px; 
    height: 100%; 
} 
body { 
    font-size: 0; 
} 
.logo, .cont { 
    font-size: 1rem; 
    min-height: 100%; 
    vertical-align: top; 
    display: inline-block; 
} 
.logo { 
    position: relative; 
    width: 30%; 
    background-color: #000; 
    color: #fff; 
} 
.cont { 
    position: relative; 
    width: 70%; 
} 
.logo h1 { 
    text-transform: uppercase; 
    color: #fff; 
    font-size: 3rem; 
} 
.wrap, .logo h1 { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
.wrap { 
    width: 90%; 
    min-width: 300px; 
} 
.wrap .box { 
    text-transform: uppercase; 
    margin: 30px 0px; 
    width: 100%; 
    border: 2px solid; 
    padding: 20px; 
    font-weight: 900; 
    font-family: helvetica; 
} 

Answer 2

.rightMain div { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Fiddle: https://jsfiddle.net/cnLav23u/

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/