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<!DOCTYPE html>
2<html>
3 <head>
4 <title>Title of the document</title>
5 <style type="text/css">
6 div {
7 display: table-cell;
8 width: 250px;
9 height: 200px;
10 vertical-align: middle;
11 }
12 </style>
13 </head>
14 <body>
15 <div>Vertically aligned text</div>
16 </body>
17</html>
1.top-align {
2 vertical-align: top;
3}
4
5.center-align {
6 vertical-align: middle;
7}
1/*
2For a flexed item you can you align - items to center content vertically
3you can use justify content to center horizontally
4*/
5
6.container {
7 display: flex;
8 align-items: center;
9 justify-content: center;
10}
11
1.container{
2 display: table;
3}
4
5.div-inside-container{
6 display: table-cell;
7 vertical-align: middle;
8}
1<div style="display: table; height: 400px; overflow: hidden;">
2 <div style="display: table-cell; vertical-align: middle;">
3 <div>
4 everything is vertically centered in modern IE8+ and others.
5 </div>
6 </div>
7</div>