Wie man ein Element horizontal und vertikal zentriert

Question

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

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

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

    first
    second

Answer 1

Führen Sie diesen Code-Schnipsel 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;
}

  h & v aligned

Answer 2

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

Das erste Kind wird vertikal und horizontal zentriert sein

Answer 3

Quelle Link

Methode 1) Anzeigetyp flex

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

Methode 2) 2D-Transformieren

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

Weitere Methoden finden Sie hier

Answer 4

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

Answer 5

Im Folgenden finden Sie den Flexbox-Ansatz, um das gewünschte Ergebnis zu erzielen

  Flexbox-Ansatz

  .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; /*für vertikale Ausrichtung*/
    top: 9%;         /*für vertikale Ausrichtung*/
    position: relative; /*für vertikale Ausrichtung*/
  }

        first
        second