[html] Flexbox: centro horizontal y verticalmente


Answers

Cómo centrar elementos vertical y horizontalmente en Flexbox

A continuación hay dos soluciones de centrado generales.

Uno para elementos flex alineados verticalmente ( flex-direction: column ) y el otro para elementos flex alineados horizontalmente ( flex-direction: row ).

En ambos casos, la altura de los divs centrados puede ser variable, indefinida, desconocida, lo que sea. La altura de los divs centrados no importa.

Aquí está el HTML para ambos:

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS (excepto estilos decorativos)

Cuando los artículos flexibles se apilan verticalmente:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

DEMO

Cuando los artículos flexibles se apilan horizontalmente:

Ajuste la regla de flex-direction del código anterior.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

DEMO

Centrar el contenido de los elementos flexibles

El alcance de un contexto de formato flexible se limita a una relación padre-hijo. Los descendientes de un contenedor flexible más allá de los niños no participan en el diseño flexible e ignorarán las propiedades de flexión. Esencialmente, las propiedades de flexión no son heredables más allá de los niños.

Por lo tanto, siempre tendrá que aplicar display: flex o display: inline-flex a un elemento principal para aplicarle propiedades flexibles al niño.

Para centrar vertical u horizontalmente el texto u otro contenido contenido en un elemento flexible, conviértalo en un contenedor flexible (anidado) y repita las reglas de centrado.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Más detalles aquí: ¿Cómo alinear verticalmente el texto dentro de un flexbox?

Alternativamente, puede aplicar margin: auto al elemento content del elemento flex.

p { margin: auto; }

Obtenga más información sobre los márgenes auto flexibles aquí: Métodos para alinear elementos flexibles (consulte el cuadro n. ° 56).

Centrar líneas múltiples de elementos flexibles

Cuando un contenedor flexible tiene múltiples líneas (debido a la envoltura), la propiedad de align-content será necesaria para la alineación de ejes cruzados.

De la especificación:

8.4. Packing Flex Lines: la propiedad de align-content

La propiedad de align-content alinea las líneas de un contenedor flexible dentro del contenedor flexible cuando hay espacio adicional en el eje transversal, similar a cómo justify-content alinea elementos individuales dentro del eje principal. Tenga en cuenta que esta propiedad no tiene efecto en un contenedor flexible de una sola línea.

Más detalles aquí: ¿Cómo funciona flex-wrap con Align-Self, Align-Items y Align-Content?

Soporte del navegador

Flexbox es compatible con todos los principales navegadores, excepto IE <10 . Algunas versiones recientes de navegador, como Safari 8 e IE10, requieren prefijos de proveedor . Para una forma rápida de agregar prefijos use Autoprefixer . Más detalles en esta respuesta .

Solución de centrado para navegadores antiguos

Para una solución de centrado alternativa que utiliza la tabla CSS y las propiedades de posicionamiento, vea esta respuesta: https://stackoverflow.com/a/31977476/3597276

Question

Cómo centrar div horizontal y verticalmente dentro del contenedor usando flexbox. En el siguiente ejemplo, quiero que cada número esté debajo de cada uno (en filas), que están centrados horizontalmente.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo




Añadir

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

al elemento contenedor de lo que quieras centrar. Documentación: justify-content y align-items .




Usando CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

échale un vistazo HERE




Si necesita centrar un texto en un enlace, esto hará el truco:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}
<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>




Related