Flexbox: centro horizontal y vertical

Cómo centrar div horizontalmente y verticalmente dentro del contenedor usando flexbox. En el ejemplo a continuación, 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

Creo que quieres algo como lo siguiente.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Ver demostración en: http://jsfiddle.net/audetwebdesign/tFscL/

Sus .flex-itemelementos deben estar a nivel de bloque (en divlugar de span) si desea que la altura y el relleno superior / inferior funcionen correctamente.

Además, en .row, establezca el ancho en autolugar de 100%.

Tus .flex-containerpropiedades están bien.

Si desea .rowque se centre verticalmente en el puerto de vista, asigne un 100% de altura a htmly body, y también ponga a cero los bodymárgenes.

Tenga en cuenta que .flex-containernecesita una altura para ver el efecto de alineación vertical; de lo contrario, el contenedor calcula la altura mínima necesaria para encerrar el contenido, que es menor que la altura del puerto de vista en este ejemplo.

Nota:
El flex-flow, flex-direction, flex-wrappropiedades podría haber hecho este diseño más fácil de implementar. Creo que el .rowcontenedor no es necesario a menos que desee agregar un poco de estilo alrededor de los elementos (imagen de fondo, bordes, etc.).

Un recurso útil es: http://demo.agektmr.com/flexbox/

Cómo centrar elementos vertical y horizontalmente en Flexbox

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

Uno para elementos flexibles alineados verticalmente ( flex-direction: column) y el 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 */
}

MANIFESTACIÓN

Cuando los elementos flexibles se apilan horizontalmente:

Ajuste la flex-directionregla 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;
}

MANIFESTACIÓN

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 hijos no participan en el diseño flexible e ignorarán las propiedades flexibles. Esencialmente, las propiedades flexibles no son heredables más allá de los niños.

Por lo tanto, siempre tendrá que aplicar display: flexo display: inline-flexun elemento primario para aplicar propiedades flexibles al elemento secundario.

Para centrar verticalmente y / u horizontalmente el texto u otro contenido contenido en un elemento flexible, haga que el elemento sea 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: autoal elemento de contenido del elemento flexible.

p { margin: auto; }

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

Centrar múltiples líneas de artículos flexibles

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

De la especificación:

8.4. Empaque Flex Lines: la align-content propiedad

La align-contentpropiedad alinea las líneas de un contenedor flexible dentro del contenedor flexible cuando hay espacio adicional en el eje transversal, de forma similar a cómo justify-contentalinea 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 del 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 obtener una solución de centrado alternativa que utiliza la tabla CSS y las propiedades de posicionamiento, consulte esta respuesta: https://stackoverflow.com/a/31977476/3597276

Añadir

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

al elemento contenedor de lo que quieras centrar. Documentación: justificar contenido y alinear elementos .

No olvide usar atributos específicos de los navegadores importantes:

alinear elementos: centro; ->

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

justify-content: 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.

1 - Establecer CSS en el elemento primario div a display: flex;

2 - Establezca CSS en el div padre para flex-direction: column;
que tenga en cuenta que esto hará que todo el contenido dentro de ese div se alinee de arriba a abajo. Esto funcionará mejor si el elemento primario solo contiene el elemento secundario y nada más.

3 - Establecer CSS en el padre div a justify-content: center;

Aquí hay un ejemplo de cómo se verá el CSS:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Puedes hacer uso de

display: flex; align-items: center; justify-content: center;

en su componente principal

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;por su contenedor y margin:auto;por su artículo funciona perfecto.

NOTA: Debe configurar widthy heightpara ver el efecto.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

Si necesita centrar un texto en un enlace, esto funcionará:

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>

margin: autofunciona perfecto con flexbox. Se centraliza vertical 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>

RESULTADO:

CÓDIGO

HTML:

<div class="flex-container">
  <div class="rows">

    <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>

CSS:

html, body {
  height: 100%;  
}

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

.rows {
  display: flex;
  flex-direction: column;
}

donde flex-containerdiv se usa para centrar vertical y horizontalmente su rowsdiv, y rowsdiv se usa para agrupar sus "elementos" y ordenarlos en una columna basada en uno.

    .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;
}

Usando CSS +

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

echa un vistazo AQUÍ