En esta ocasión vamos a centrar un div usando la propiedad margin
En el ejemplo que os dejo mas abajo vamos a tener tres div, los dos primerios div estarán uno al lado del otro a la misma altura y el tercer div queremos que este debajo y a la vez que este centrado en la pantalla. Para en la clase «centrado» colocamos la propiedad margin : auto para centrarlo.
Os dejo el ejemplo para centrar un div con css.
01 | <html> |
02 | <head> |
03 | <title>Centrar Div </title> |
04 | <style type="text/css"> |
05 |
06 | .columna1{ |
07 | background-color: grey; |
08 | width: 50%; |
09 | float: left; |
10 | } |
11 | .columna2{ |
12 | background-color: yellow; |
13 | width: 50%; |
14 | float: left; |
15 | } |
16 |
17 | .centrado{ |
18 | width: 50%; |
19 | margin: 0 auto; |
20 | background-color: orange; |
21 | } |
22 | |
23 | </style> |
24 | </head> |
25 | <body> |
26 | <div class="columna1">Div1</div> |
27 | <div class="columna2">Div2</div> |
28 | <div class="centrado">Div3</div> |
29 |
30 | </body> |
31 | </html> |