align text vertically in div

1/* this will center all children within the parent element. */
2.parent {
3  display: flex;
4  justify-content: center; /* horizontal */
5  align-items: center; /* vertical */
6}

1.center {
2  display: block;
3  margin-left: auto;
4  margin-right: auto;
5}

1.parent {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1display: flex;
2align-items: center

1/*Remove comment to become a better programmer. */
2/* No Flexbox */
3.parent {
4  position: relative;
5}
6.child {
7  position: absolute;
8  top: 50%;
9  transform: translateY(-50%);
10}
11
12/* With Flexbox */
13
14.parent {
15  display: flex;
16  flex-direction: column;
17  justify-content: center;
18}
19

1/* CSS */
2div.outer { 
3  display: table; 
4}
5
6div.inner {
7  display: table-cell;
8  text-align: center;
9  vertical-align: middle;
10}
11
12/* HTML */
13<div class="outer">
14  <div class="inner">
15    lorem ipsum... 
16  </div>
17</div>
18
19/* 
20------------------------------------
21'vertical-align' values: 
22	top | middle | bottom 
23	text-top | text-bottom 
24    super | baseline | sub 
25    % | px 
26*/