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 position: absolute;
2 top: 50%;
3 left: 50%;
4 transform: translate(-50%, -50%);
1// example 1
2div { display: grid; place-items: center; }
3
4// example 3
5div{ display:flex; align-items:center; }
6
7// example 3
8div { width: 100%; margin: 0 auto; }
1.container{
2 display: table;
3}
4
5.div-inside-container{
6 display: table-cell;
7 vertical-align: middle;
8}
1.center {
2 margin: auto;
3 width: 50%;
4 border: 3px solid green;
5 padding: 10px;
6}
1
2/**************** 1º method to center all elements ********************/
3body {
4 text-align: center;
5}
6
7/* If all of your elements have the property display equal to "inline",
8"block" or "inline-block", then you can use the text-align: center in
9the <body> tag */
10
11tag_name {
12 display: inline; /* block or inline-block*/
13}
14
15/*...but if we have an element of type "block" with a width diferente
16from the default (maximum width of the page), then this will no
17longer work!*/
18
19tag_name {
20 display: block;
21 width: 170px;
22}
23
24
25/**************** 2º method to center all elements ********************/
26/* Another method, is to use the margins to center the element
27horizontally and/or vertically */
28
29tag_name {
30 display: block;
31 width: 100px;
32 margin: 0 auto 0 auto; /* top, right, bottom, left */
33}
34
35