SHOW:
|
|
- or go back to the newest paste.
1 | <!DOCTYPE html> | |
2 | - | <html> |
2 | + | <html lang="en"> |
3 | <head> | |
4 | - | <meta charset="utf-8"> |
4 | + | <meta charset="UTF-8"> |
5 | - | <meta name="viewport" content="width=device-width"> |
5 | + | <title>Document</title> |
6 | - | <title>Perfectly centered</title> |
6 | + | |
7 | <style> | |
8 | - | /* http://howtocenterincss.com/ */ |
8 | + | .centrado{ |
9 | - | .mainDiv{ |
9 | + | position: absolute; |
10 | - | width:500px; |
10 | + | background:pink; |
11 | - | height:300px; |
11 | + | width:200px; |
12 | - | position:fixed; |
12 | + | height:200px; |
13 | - | top:50%; |
13 | + | margin: auto; |
14 | - | left:50%; |
14 | + | left: 0; |
15 | - | transform:translate(-50%,-50%); |
15 | + | right: 0; |
16 | - | background-color:pink; |
16 | + | top: 0; |
17 | - | display:flex; |
17 | + | bottom: 0; |
18 | - | justify-content:center; |
18 | + | |
19 | - | align-items:center; |
19 | + | |
20 | ||
21 | </head> | |
22 | <body> | |
23 | ||
24 | <div class="centrado"> | |
25 | - | <div class="mainDiv">Centered</div> |
25 | + | </div> |
26 | ||
27 | ||
28 | - | </html> |
28 | + | |
29 | </body> | |
30 | </html> | |
31 | ||
32 |