html - Flexbox: centro horizontal y verticalmente.



5 Answers

Cómo centrar los elementos vertical y horizontalmente en Flexbox

A continuación se presentan dos soluciones de centrado general.

Uno para elementos flexibles alineados verticalmente ( flex-direction: column ) y otro para elementos flexibles 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 (excluyendo estilos decorativos)

Cuando los elementos 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 elementos 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

Centrando el contenido de los ítems flex.

El alcance de un contexto de formato flexible está limitado 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 de flexión e ignorarán las propiedades de flexión. Esencialmente, las propiedades de flexión no son heredables más allá de los hijos.

Por lo tanto, siempre deberá aplicar display: flex o display: inline-flex a un elemento padre para poder aplicar las propiedades de flexión al niño.

Para centrar vertical u horizontalmente el texto u otro contenido contenido en un elemento flexible, convierta el elemento 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 de contenido del elemento flexible.

p { margin: auto; }

Obtenga información sobre los márgenes auto flexibles aquí: Métodos para alinear elementos flexibles (vea el recuadro # 56).

Centrado en múltiples líneas de elementos flexibles.

Cuando un contenedor flexible tiene varias líneas (debido al ajuste), la propiedad align-content será necesaria para la alineación del eje transversal.

De la especificación:

8.4. Empaquetando líneas flexibles: la propiedad align-content

La propiedad align-content alinea las líneas de un contenedor flexible dentro del contenedor flex cuando hay espacio extra en el eje transversal, de manera similar a como 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 navegadores principales, excepto IE <10 . Algunas versiones recientes del navegador, como Safari 8 y IE10, requieren prefijos de proveedores . Para una manera rápida de agregar prefijos use Autoprefixer . Más detalles en esta respuesta .

Solución de centrado para navegadores antiguos.

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

html css html5 css3 flexbox

Cómo centrar div horizontalmente y verticalmente dentro del contenedor usando flexbox. En el siguiente ejemplo, quiero que cada número esté uno debajo del otro (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




No te olvides de usar atributos específicos de los navegadores importantes:

alinear-artículos: centro; ->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justificar-contenido: centro; ->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Puede leer estos dos enlaces para comprender mejor flex: http://css-tricks.com/almanac/properties/j/justify-content/ y http://ptb2.me/flexbox/

Buena suerte.




margin: auto funciona perfecto con flexbox. Se centraliza verticalmente y horizontalmente.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="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>  
</div>
</body>
</html>




displa: flex;
align-tems: center;
justify-content: center;




Usando CSS +

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

mira HERE




Related