1/* Flex */
2.center {
3 display: flex;
4 justify-content: center;
5 align-items: center;
6}
7/* Without Flex */
8.parent {
9 position: relative;
10}
11.child {
12 position: absolute;
13 top: 50%;
14 transform: translateY(-50%);
15}
1/* No Flexbox */
2.parent {
3 position: relative;
4}
5.child {
6 position: absolute;
7 top: 50%;
8 transform: translateY(-50%);
9}
10
11/* With Flexbox */
12
13.parent {
14 display: flex;
15 flex-direction: column;
16 justify-content: center;
17}
18
19
20
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<!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.container{
2 margin: 0;
3 position: absolute;
4 top: 50%;
5 left: 50%;
6 -ms-transform: translate(-50%, -50%);
7 transform: translate(-50%, -50%);
8 width: /* Define the width here; */
9 height: /* Define the height here; */
10}
11
12/*You have to define the width and height! */
1#CSS Vertical Align middle:
2/* Flex */
3.center {
4 display: flex;
5 justify-content: center;
6 align-items: center;
7}
8/* Without Flex */
9.parent {
10 position: relative;
11}
12.child {
13 position: absolute;
14 top: 50%;
15 transform: translateY(-50%);
16}