centrando un botón dentro de un div

en el desarrollo web, a menudo es deseable centrar un botón dentro de un div. Exploremos dos soluciones a este desafío:

usando flexbox

FlexBox proporciona una solución elegante para alinear elementos a lo largo de ambos ejes. Para centrar un botón horizontal y verticalmente dentro de un div:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Si solo se desee centrado horizontal, se puede usar la propiedad Justify-Content se puede usar:

#wrapper {
  display: flex;
  justify-content: center;
}

enfoque basado en margen

Sin flexbox, un botón se puede centrar usando márgenes:

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}

solo para centrado horizontal, se puede usar uno de estos dos enfoques:

• margen: 0 automático; en el botón
• text-align: center; en la contener div