Estoy tratando de centrar el contenido de mis pestañas verticalmente, pero cuando agrego el estilo CSS display:inline-flex , la alineación horizontal del texto desaparece.

¿Cómo puedo hacer ambas alineaciones de texto x e y para cada una de mis pestañas?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

• Enfoque 1 - transform translateX/ translateY:

  Ejemplo aquí / Ejemplo de pantalla completa

  En los navegadores compatibles (la mayoría de ellos), puede usar top: 50%/ left: 50%en combinación con translateX(-50%) translateY(-50%)para centrar dinámicamente vertical / horizontalmente el elemento.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

• Enfoque 2 - Método de Flexbox:

  Ejemplo aquí / Ejemplo de pantalla completa

  En los navegadores compatibles , configure el displayelemento de destino flexy utilícelo align-items: centerpara el centrado vertical y el justify-content: centercentrado horizontal. Simplemente no olvide agregar prefijos de proveedor para soporte adicional del navegador ( ver ejemplo ).

html, body, .container {
    height: 100%;
}

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

<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

• Enfoque 3 - table-cell/ vertical-align: middle:

  Ejemplo aquí / Ejemplo de pantalla completa

  En algunos casos, deberá asegurarse de que la altura del elemento html/ bodyesté establecida en 100%.

  Para la alineación vertical, establezca width/ heightto del elemento principal 100%y agregue display: table. Luego, para el elemento hijo, cambie displaya table-celly agregue vertical-align: middle.

  Para el centrado horizontal, puede agregar text-align: centerpara centrar el texto y cualquier otro inlineelemento secundario. Alternativamente, podría usar margin: 0 auto, suponiendo que el elemento esté blocknivelado.

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

• Enfoque 4 - Absolutamente posicionado 50%desde la parte superior con desplazamiento:

  Ejemplo aquí / Ejemplo de pantalla completa

  Este enfoque asume que el texto tiene una altura conocida - en este caso, 18px. Simplemente coloque el elemento 50%desde arriba, en relación con el elemento padre. Use un margin-topvalor negativo que sea la mitad de la altura conocida del elemento, en este caso - -9px.

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

• Enfoque 5 - El line-height método (menos flexible - no sugerido):

  Ejemplo aquí

  En algunos casos, el elemento padre tendrá una altura fija. Para el centrado vertical, todo lo que tiene que hacer es establecer un line-heightvalor en el elemento secundario igual a la altura fija del elemento primario.

  Aunque esta solución funcionará en algunos casos, vale la pena señalar que no funcionará cuando haya varias líneas de texto, como esta .

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

Si CSS3 es una opción (o tiene una reserva), puede usar transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

A diferencia del primer enfoque anterior, no desea usar left: 50% con la traducción negativa porque hay un error de desbordamiento en IE9 +. Utilice un valor correcto positivo y no verá barras de desplazamiento horizontales.

La mejor manera de centrar una caja, tanto vertical como horizontalmente, es usar dos contenedores:

El otro contenedor:

• debería tener display: table;

El contenedor interior:

• debería tener display: table-cell;
• debería tener vertical-align: middle;
• debería tener text-align: center;

El cuadro de contenido:

• debería tener display: inline-block;
• debe ajustar la alineación horizontal del texto, a menos que desee que el texto esté centrado

Demo:

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Ver también este violín !

Centrado en el medio de la página:

Para centrar su contenido en el medio de su página, agregue lo siguiente a su contenedor externo:

• position : absolute;
• width: 100%;
• height: 100%;

Aquí hay una demostración para eso:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Ver también este violín !

Aquí se explica cómo usar 2 propiedades flexibles simples para centrar n divs en el eje 2:

• Establezca la altura de su contenedor: aquí el cuerpo está configurado para ser al menos 100vh.
• align-items: center centrará verticalmente los bloques
• justify-content: space-around distribuirá el espacio horizontal libre alrededor de los divs

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div>foo</div>
<div>bar</div>

Ejecute este fragmento de código y vea un div alineado vertical y horizontalmente.

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

La solución más simple y limpia para mí es usar la propiedad CSS3 "transform":

.container {
  position: relative;
}

.container a {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

<div class="container">
  <a href="#">Hello world!</a>
</div>

    .align {
        display: flex;
        width: 400px;
        height: 400px;
        border: solid 1px black;
        align-items: center;
        justify-content: space-around;
    }
    .align div:first-child {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute; 
    }
    .align div {
        width: 20px;
        height: 20px;
        background-color: blue;
    }

    <div class='align'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

El primer niño estará alineado vertical y horizontalmente en el centro

para centrar el Div en una página check the fiddle link

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<div id="vh">Div to be aligned vertically</div>

Actualizar Otra opción es usar flex box check the fiddle link

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

A continuación se muestra el enfoque de caja flexible para obtener el resultado deseado

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>

Otro enfoque es usar la tabla:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
  <table style="width:100%; height:100%">
    <tr style="height:100%">
      <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
    </tr>
  </table>
</div>

Para centrar vertical y horizontalmente un elemento, también podemos usar las propiedades mencionadas a continuación.

Esta propiedad CSS alinea elementos verticalmente y acepta los siguientes valores:

inicio flexible : los elementos se alinean con la parte superior del contenedor.

extremo flexible : los elementos se alinean con el fondo del contenedor.

centro : los elementos se alinean en el centro vertical del contenedor.

línea base : los elementos se muestran en la línea base del contenedor.

Estirar : los artículos se estiran para adaptarse al contenedor.

Esta propiedad CSS justifica el contenido , que alinea los elementos horizontalmente y acepta los siguientes valores:

inicio flexible : los elementos se alinean al lado izquierdo del contenedor.

extremo flexible : los elementos se alinean al lado derecho del contenedor.

centrar : los elementos se alinean en el centro del contenedor.

espacio entre : los elementos se muestran con el mismo espacio entre ellos.

espacio alrededor : los elementos se muestran con el mismo espacio alrededor de ellos.

Enfoque de cuadrícula CSS

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.main {
    background-color: #444;
}

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box main"></div>
</div>

Es necesario seguir la siguiente solución nueva y fácil:

  .centered-class {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100vw;
      height: 100vh;
    }

<div class="centered-class">
  I'm in center vertically and horizontally.
</div>

• Enfoque 6

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}

<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

Simplemente coloque arriba, abajo, izquierda y derecha en 0.

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

Puede lograr esto usando CSS (su elemento display:inline-grid+ grid-auto-flow: row;) Grid y Flex Box (elemento padre)display:flex; ),

Ver el fragmento a continuación

#leftFrame {
  display: flex;
  height: 100vh;
  width: 100%;
}

#tabs {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}

html,body {
  margin:0;
  padding:0;
}

<div>
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>        
  </div>
</div>
</div>

Enlace fuente

Método 1) Tipo de pantalla flexible

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

Método 2) Transformación 2D

.child-element {
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
   position: absolute;
}

Ver otros métodos aquí

La forma más fácil de centrar un div tanto vertical como horizontalmente es la siguiente:

<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
    <div style="display: table-cell; vertical-align: middle; text-align: center;">
        Text Here
    </div>
</div>

Un ejemplo más :

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}


<div class="parent">
    <div class="child">
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
    </div>
</div>

Este es un problema relacionado que las personas pueden visitar en esta página cuando buscan: Cuando quiero centrar un div para un gif animado "esperando ..." (cuadrado de 100 px) utilizo:

  .centreDiv {
        position: absolute;
        top: calc(50vh - 50px);
        top: -moz-calc(50vh - 50px);
        top: -webkit-calc(50vh - 50px);
        left: calc(50vw - 50px);
        left: -moz-calc(50vw - 50px);
        left: -webkit-calc(50vw - 50px);
        z-index: 1000; /*whatever is required*/
    }

Si lo prefiere sin :
flexbox / grid / table
o sin :
vertical-align: middle

Tu puedes hacer:

HTML

<div class="box">
  <h2 class="box_label">square</h2>
</div>

CSS

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid black;
}

.box_label {
  box-sizing: border-box;
  display: inline-block;
  transform: translateY(50%);
  text-align: center;
  border: 1px solid black;
}

Esto debería funcionar

.center-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

<div class="center-div">Center Div</div>

Simple ! ¡Use flex de pantalla en contenedor y margen automático en texto!

#hood{

 width : 300px;
 height: 100px;
 border: solid 1px #333333;
 display: flex; 
}

#hood span{

  margin: auto
}



<html>
<head></head>
    <body>
        <div id="hood">
            <span> I Am Centered</span>
        </div>
    </body>
</html>

Demostración: https://jsfiddle.net/ay95f08g/

Probado: Safari, Chrome, Firefox y Opera en MacOs Mojave. (toda última actualización el 25 de febrero de 2019)

Hay muchos para hacer lo mismo. puede usar el siguiente método para hacer el div en el medio de la página.

.center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div class="center-box">
  <h1>Text in center of page</h1>
</div>

salud !

El flexboxenfoque más simple :

La forma más fácil de centrar un solo elemento vertical y horizontalmente es convertirlo en un elemento flexible y establecer su margen en auto:

Si aplica márgenes automáticos a un elemento flexible, ese elemento ampliará automáticamente su margen especificado para ocupar el espacio adicional en el contenedor flexible ...

.flex-container {
  height: 150px;
  display: flex;
}

.flex-item {
  margin: auto;
}

<div class="flex-container">
  <div class="flex-item">
    This should be centered!
  </div>
</div>

Esta extensión de márgenes en cada dirección empujará el elemento exactamente al centro de su contenedor.