Ich versuche, den Inhalt meiner Registerkarten vertikal zu zentrieren, aber wenn ich den CSS-Stil hinzufüge display:inline-flex, verschwindet die horizontale Textausrichtung.

Wie kann ich beide Textausrichtungen x und y für jede meiner Registerkarten vornehmen?

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

• Ansatz 1 - transform translateX/ translateY:

  Beispiel hier / Vollbild Beispiel

  In unterstützten Browsern (die meisten von ihnen) können Sie top: 50%/ left: 50%in Kombination mit verwenden, translateX(-50%) translateY(-50%)um das Element dynamisch vertikal / horizontal zu zentrieren.

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

• Ansatz 2 - Flexbox-Methode:

  Beispiel hier / Vollbild Beispiel

  In unterstützten Browser setzte die displaydes Zielelements flexund die Verwendung align-items: centerfür eine vertikale Zentrierung und justify-content: centerzur horizontalen Zentrierung. Vergessen Sie nicht, Herstellerpräfixe für zusätzliche Browserunterstützung hinzuzufügen ( siehe Beispiel ).

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>

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

  Beispiel hier / Vollbild Beispiel

  In einigen Fällen müssen Sie sicherstellen, dass die html / bodyElement Höhe eingestellt ist 100%.

  Stellen Sie für die vertikale Ausrichtung das übergeordnete Element width/ heightto ein 100%und fügen Sie es hinzu display: table. Ändern Sie dann für das untergeordnete Element dasdisplay to table-cellund fügen Sie es hinzu vertical-align: middle.

  Für die horizontale Zentrierung können Sie entweder text-align: centerden Text und andere inlineuntergeordnete Elemente hinzufügen , um sie zu zentrieren . Alternativ können Sie auch margin: 0 autodavon ausgehen, dass das Element blockeben ist.

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>

• Ansatz 4 - Absolut 50%von oben mit Verschiebung positioniert :

  Beispiel hier / Vollbild Beispiel

  Bei diesem Ansatz wird davon ausgegangen, dass der Text eine bekannte Höhe hat - in diesem Fall 18px. Positionieren Sie das Element einfach unbedingt 50%von oben relativ zum übergeordneten Element. Verwenden Sie margin-topin diesem Fall einen negativen Wert, der der Hälfte der bekannten Höhe des Elements entspricht -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>

• Ansatz 5 - Die line-height Methode (am wenigsten flexibel - nicht vorgeschlagen):

  Beispiel hier

  In einigen Fällen hat das übergeordnete Element eine feste Höhe. Für die vertikale Zentrierung müssen Sie lediglich a einstellenline-height Wert für das untergeordnete Element , der der festen Höhe des übergeordneten Elements entspricht.

  Obwohl diese Lösung in einigen Fällen funktioniert, ist es erwähnenswert, dass sie nicht funktioniert, wenn mehrere Textzeilen vorhanden sind - wie diese .

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

Wenn CSS3 eine Option ist (oder Sie einen Fallback haben), können Sie transform verwenden:

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

Im Gegensatz zum ersten Ansatz oben möchten Sie nicht left: 50% mit der negativen Übersetzung verwenden, da in IE9 + ein Überlauffehler vorliegt. Wenn Sie einen positiven rechten Wert verwenden, werden keine horizontalen Bildlaufleisten angezeigt.

Der beste Weg, eine Box sowohl vertikal als auch horizontal zu zentrieren, besteht darin, zwei Container zu verwenden:

Der Außenbehälter:

• sollte haben display: table;

Der innere Behälter:

• sollte haben display: table-cell;
• sollte haben vertical-align: middle;
• sollte haben text-align: center;

Das Inhaltsfeld:

• sollte haben display: inline-block;
• sollte die horizontale Textausrichtung anpassen, es sei denn, Sie möchten, dass der Text zentriert wird

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>

Siehe auch diese Geige !

Zentrierung in der Mitte der Seite:

Fügen Sie Ihrem Outher-Container Folgendes hinzu, um Ihren Inhalt in der Mitte Ihrer Seite zu zentrieren:

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

Hier ist eine Demo dafür:

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>

Siehe auch diese Geige !

So verwenden Sie zwei einfache Flex-Eigenschaften, um n Divs auf der 2-Achse zu zentrieren:

• Stellen Sie die Höhe Ihres Containers ein: Hier ist der Körper auf mindestens 100vh eingestellt.
• align-items: center zentriert die Blöcke vertikal
• justify-content: space-around verteilt den freien horizontalen Raum um die Divs

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

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

Führen Sie dieses Code-Snippet aus und sehen Sie ein vertikal und horizontal ausgerichtetes div.

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>

Die einfachste und sauberste Lösung für mich ist die Verwendung der CSS3-Eigenschaft "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>

Das erste Kind wird vertikal und horizontal in der Mitte ausgerichtet

um die Div auf einer Seite zu zentrieren 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>

Update Eine weitere Option ist die Verwendung der Flexbox 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>

Nachfolgend finden Sie den Flex-Box-Ansatz, um das gewünschte Ergebnis zu erzielen

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

Ein anderer Ansatz ist die Verwendung von Tabelle:

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

Um ein Element vertikal und horizontal zu zentrieren, können wir auch die unten genannten Eigenschaften verwenden.

Diese CSS-Eigenschaft richtet Elemente vertikal aus und akzeptiert die folgenden Werte:

Flex-Start : Die Elemente werden an der Oberseite des Containers ausgerichtet.

Flex-End : Die Elemente werden am Boden des Behälters ausgerichtet.

Mitte : Die Elemente werden in der vertikalen Mitte des Containers ausgerichtet.

Grundlinie : Elemente werden an der Grundlinie des Containers angezeigt.

dehnen : Die Gegenstände werden gedehnt, um in den Behälter zu passen.

Diese CSS-Eigenschaft rechtfertigen den Inhalt , der Elemente horizontal ausrichtet und die folgenden Werte akzeptiert:

Flex-Start : Die Elemente werden auf der linken Seite des Containers ausgerichtet.

Flex-End : Die Elemente werden auf der rechten Seite des Containers ausgerichtet.

Mitte : Die Elemente werden in der Mitte des Containers ausgerichtet.

Zwischenraum : Elemente werden mit gleichem Abstand zwischen ihnen angezeigt.

Leerzeichen : Elemente werden mit gleichem Abstand um sie herum angezeigt.

Grid-CSS-Ansatz

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

Folgende neue und einfache Lösung muss befolgt werden:

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

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

Machen Sie einfach oben, unten, links und rechts auf 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>

Sie können dies mit CSS (Ihr Element display:inline-grid+ grid-auto-flow: row;) Grid und Flex Box (übergeordnetes Element) erreichendisplay:flex; ) erreichen.

Siehe unten Ausschnitt

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

Quelle Link -

Methode 1) Anzeigetyp flex

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

Methode 2) 2D-Transformation

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

Weitere Methoden finden Sie hier

Der einfachste Weg, ein Div sowohl vertikal als auch horizontal zu zentrieren, ist wie folgt:

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

Noch ein Beispiel :

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

Dies ist ein verwandtes Problem, das bei der Suche möglicherweise auf diese Seite gelangt: Wenn ich ein Div für ein (100 Pixel großes Quadrat) "wartendes" animiertes GIF zentrieren möchte, verwende ich:

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

Wenn Sie es bevorzugen ohne :
Flexbox / Grid / Table
oder ohne :
Vertical-Align: Middle

Du kannst tun:

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

Das sollte funktionieren

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

Einfach! Verwenden Sie Display Flex für Container und Rand Auto für Text !!!!

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

Getestet: Safari, Chrome, Firefox und Opera auf MacOs Mojave. (alle letzten Updates am 25. Februar 2019)

Es gibt viele, die das Gleiche tun sollten. Sie können die folgende Methode verwenden, um das Div in der Mitte der Seite zu erstellen.

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

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

Prost !

Der einfachste flexboxAnsatz:

Der einfachste Weg, ein einzelnes Element vertikal und horizontal zu zentrieren, besteht darin, es zu einem flexiblen Element zu machen und seinen Rand auf Folgendes festzulegen auto:

Wenn Sie einem Flex-Element automatische Ränder zuweisen, erweitert dieses Element automatisch den angegebenen Rand, um den zusätzlichen Platz im Flex-Container zu belegen ...

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

.flex-item {
  margin: auto;
}

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

Diese Erweiterung der Ränder in jede Richtung drückt das Element genau in die Mitte seines Behälters.