Sto cercando di centrare il contenuto delle mie schede in verticale, ma quando aggiungo lo stile CSS display:inline-flex, l'allineamento orizzontale del testo scompare.

Come posso effettuare entrambi gli allineamenti di testo xey per ciascuna delle mie schede?

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

• Approccio 1 - transform translateX/ translateY:

  Esempio qui / Esempio di schermo intero

  Nei browser supportati (la maggior parte di essi), è possibile utilizzare top: 50%/ left: 50%in combinazione con translateX(-50%) translateY(-50%)per centrare dinamicamente verticalmente / orizzontalmente l'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>

• Approccio 2 - Metodo Flexbox:

  Esempio qui / Esempio di schermo intero

  Nei browser supportati , impostare l' displayelemento di destinazione su flexe utilizzarlo align-items: centerper la centratura verticale e justify-content: centerper la centratura orizzontale. Non dimenticare di aggiungere i prefissi del fornitore per ulteriore supporto del browser ( vedi esempio ).

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>

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

  Esempio qui / Esempio di schermo intero

  In alcuni casi, dovrai assicurarti che l' altezza dell'elemento html/ bodysia impostata su 100%.

  Per l'allineamento verticale, imposta l'elemento genitore width/ heightsu 100%e aggiungi display: table. Quindi per l'elemento figlio, modifica displayin table-celle aggiungi vertical-align: middle.

  Per la centratura orizzontale, è possibile aggiungere text-align: centerper centrare il testo e tutti gli altri inlineelementi figlio. In alternativa, è possibile utilizzare margin: 0 auto, supponendo che l'elemento sia a blocklivello.

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>

• Approccio 4 - Assolutamente posizionato 50%dall'alto con spostamento:

  Esempio qui / Esempio di schermo intero

  Questo approccio presuppone che il testo presenta un'altezza nota - in questo caso, 18px. Posiziona assolutamente l'elemento 50%dall'alto, rispetto all'elemento genitore. Utilizzare un margin-topvalore negativo che è metà dell'altezza nota dell'elemento, in questo 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>

• Approccio 5 - Il line-heightmetodo (almeno flessibile - non consigliato):

  Esempio qui

  In alcuni casi, l'elemento genitore avrà un'altezza fissa. Per il centraggio verticale, tutto ciò che devi fare è impostare un line-heightvalore sull'elemento figlio uguale all'altezza fissa dell'elemento padre.

  Sebbene questa soluzione funzionerà in alcuni casi, vale la pena notare che non funzionerà quando ci sono più righe di testo - in questo modo .

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

Se CSS3 è un'opzione (o hai un fallback) puoi usare transform:

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

A differenza del primo approccio sopra, non vuoi usare left: 50% con la traduzione negativa perché c'è un bug di overflow in IE9 +. Utilizza un valore corretto positivo e non vedrai barre di scorrimento orizzontali.

Il modo migliore per centrare una scatola sia in verticale che in orizzontale è utilizzare due contenitori:

Il contenitore esterno:

• avrebbe dovuto display: table;

Il contenitore interno:

• avrebbe dovuto display: table-cell;
• avrebbe dovuto vertical-align: middle;
• avrebbe dovuto text-align: center;

La casella del contenuto:

• avrebbe dovuto display: inline-block;
• dovrebbe regolare l'allineamento orizzontale del testo, a meno che non si desideri centrare il testo

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>

Vedi anche questo violino !

Centratura al centro della pagina:

Per centrare i contenuti al centro della pagina, aggiungere quanto segue al contenitore esterno:

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

Ecco una demo per questo:

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>

Vedi anche questo violino !

Ecco come utilizzare 2 semplici proprietà di flessione per centrare n div sul 2 asse:

• Imposta l'altezza del tuo contenitore: qui il corpo è impostato per essere almeno 100vh.
• align-items: center centrerà verticalmente i blocchi
• justify-content: space-around distribuirà lo spazio orizzontale libero attorno ai div

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

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

Esegui questo snippet di codice e visualizza un div allineato verticalmente e orizzontalmente.

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 soluzione più semplice e pulita per me sta usando la proprietà CSS3 "trasforma":

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

Il primo figlio sarà allineato verticalmente e orizzontalmente al centro

centrare il Div in una pagina 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>

Aggiorna Un'altra opzione è quella di utilizzare la scatola flessibile 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>

Di seguito è riportato l'approccio Flex-box per ottenere il risultato desiderato

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

Un altro approccio è utilizzare la tabella:

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

Per centrare verticalmente e orizzontalmente un elemento possiamo anche usare le proprietà sotto menzionate.

Questa proprietà CSS allinea gli elementi verticalmente e accetta i seguenti valori:

inizio flessibile : gli oggetti si allineano alla parte superiore del contenitore.

estremità flessibile : gli oggetti si allineano al fondo del contenitore.

centro : gli oggetti si allineano al centro verticale del contenitore.

linea di base : gli elementi vengono visualizzati sulla linea di base del contenitore.

tratto : gli articoli sono allungati per adattarsi al contenitore.

Questa proprietà CSS giustifica il contenuto , che allinea gli elementi in orizzontale e accetta i seguenti valori:

inizio flessibile : gli oggetti si allineano al lato sinistro del contenitore.

estremità flessibile : gli oggetti si allineano al lato destro del contenitore.

centro : gli oggetti si allineano al centro del contenitore.

spazio tra : gli oggetti vengono visualizzati con una spaziatura uguale tra loro.

spazio intorno : gli oggetti vengono visualizzati con uguale spaziatura attorno a loro.

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

È necessario seguire la seguente soluzione nuova e semplice:

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

• Approccio 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;
    }

Basta fare in alto, in basso, a sinistra e a destra a 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>

Puoi ottenere ciò utilizzando CSS (your element display:inline-grid+ grid-auto-flow: row;) Grid and Flex Box (parent elementdisplay:flex; ),

Vedi lo snippet di seguito

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

Link alla fonte

Metodo 1) Tipo di visualizzazione flex

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

Metodo 2) Trasformazione 2D

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

Vedi altri metodi qui

Il modo più semplice per centrare un div sia in verticale che in orizzontale è il seguente:

<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 altro esempio :

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

Questo è un problema correlato che le persone potrebbero venire a questa pagina durante la ricerca: Quando voglio centrare un div per una gif animata (in attesa .. "da 100px quadrati) che uso:

  .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*/
    }

Se lo preferisci senza :
flexbox / grid / table
o senza :
vertical-align: middle

Tu puoi fare:

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

Questo dovrebbe funzionare

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

Semplice! Usa la flessibilità di visualizzazione sul contenitore e il margine automatico sul testo !!!!

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

Demo: https://jsfiddle.net/ay95f08g/

Testato: Safari, Chrome, Firefox e Opera su MacOs Mojave. (tutto l'ultimo aggiornamento il 25 febbraio 2019)

Ci sono molti che dovevano fare lo stesso. puoi usare il seguente metodo per fare il div al centro della pagina.

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

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

Saluti !

L' flexboxapproccio più semplice :

Il modo più semplice per centrare un singolo elemento in verticale e in orizzontale è renderlo un oggetto flessibile e impostare il suo margine su auto:

Se si applicano i margini automatici a un articolo flessibile, quell'elemento estenderà automaticamente il margine specificato per occupare lo spazio aggiuntivo nel contenitore flessibile ...

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

.flex-item {
  margin: auto;
}

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

Questa estensione dei margini in ciascuna direzione spingerà l'elemento esattamente al centro del suo contenitore.