JavaScript > Centrar

by academiax

HTML

<p id="centrar-texto">Texto</p>
<div id="centrar-con-margen" class="cuadrado-rojo"></div>
<div id="centrar-con-flexbox">
    <div class="cuadrado-rojo"></div>
</div>
<div id="centrar-con-transform" class="cuadrado-rojo"></div>

CSS

#centrar-texto {
  text-align: center;
}

.cuadrado-rojo {
  background: red;
  height: 10px;
  width: 10px;
  border: 2px solid black;
}

#centrar-con-margen {
  margin: 0 auto;
}

#centrar-con-flexbox {
  display: flex;
  justify-content: center;
}

#centrar-con-transform {
  left: 50%;
}