Ejemplo 1: Center div usando margin-auto

https://i8pn0.csb.app/margin-auto-example.html

 <div class="container"> <div class="child"></div> </div>

 .container { width: 350px; height: 200px; outline: dashed 1px black; } .child { width: 50px; height: 50px; background-color: red; /* Center horizontally*/ margin: 0 auto; }

Ejemplo 2: Centre un Div Horizontalmente usando display: flex

https://i8pn0.csb.app/flex-x.html

 <div class="container"> <div class="child"></div> </div>

 .container { margin: 25px; width: 350px; height: 200px; /* Center child horizontally*/ display: flex; justify-content: center; } .child { width: 50px; height: 50px; background-color: red; }

Ejemplo 3: Centre un Div Verticalmente usando display: flex

https://i8pn0.csb.app/flex-y.html

 <div class="container"> <div class="child"></div> </div>

 .container { margin: 25px; width: 350px; height: 200px; outline: dashed 1px black; /* Center vertically */ display: flex; align-items: center; } .child { width: 50px; height: 50px; background-color: red; }

Estos ejemplos no son la única forma sino la más fácil, y algunos de ellos solo funcionan en navegadores modernos.