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

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

Answer 2

Müssen Sie folgende Neue und einfache Lösung befolgen:

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

  Ich bin vertikal und horizontal zentriert.

Answer 3

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 4

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

Sehen Sie unten den Auszug

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

    erste
    zweite

Answer 5

Wenn es nur um Textausrichtung geht, ist es einfach. Verwenden Sie einfach dies:

vertical-align: Mitte; /* Vertikale Zentrierung */
Text-align: Center; /* Horizontale Zentrierung */

Eltern-Styling ist nicht erforderlich.

In einigen Fällen, wenn das Elternteil einige Style-Eigenschaften hat, kann es das Kind beeinflussen, wo dies nicht ordnungsgemäß funktioniert.