Центрирование блока по высоте

[Heidel]

1 способ
HTML

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus. Nulla ultrices, massa eu ornare luctus, orci massa gravida ligula, sed venenatis dolor dolor sit amet magna. Aenean eleifend arcu quam, lobortis tincidunt justo porta tempor. Proin ligula tellus</div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: red;
}

.box {
  background: green;
  margin: auto;
  width: 30vw;
}

https://jsfiddle.net/ycrj89hk/10/

Несколько блоков по высоте
HTML

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: red;
  flex-direction: column;
}

.box {
  background: green;
  margin: auto;
  width: 30vw;
}

https://jsfiddle.net/ycrj89hk/15/

2 способ
HTML

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor nulla vitae mollis luctus.</div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: red;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  background: green;
  width: 30vw;
}

https://jsfiddle.net/ycrj89hk/21/

@темы: Верстка, CSS3