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

Wenn Sie es ohne Flexbox, Grid, Tabelle oder vertical-align: middle; bevorzugen

Sie können Folgendes tun:

HTML

    quadratisch

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

Answer 2

Das sollte funktionieren

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

Center Div

Answer 3

Setzen Sie einfach oben, unten, links und rechts auf 0.

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

Ich bin in der Mitte

Answer 4

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

Diese CSS-Eigenschaft align-items zentriert vertikal und akzeptiert die folgenden Werte:

flex-start: Elemente werden oben im Container ausgerichtet.

flex-end: Elemente werden unten im Container ausgerichtet.

center: Elemente werden vertikal in der Mitte des Containers ausgerichtet.

baseline: Elemente werden auf der Baseline des Containers angezeigt.

stretch: Elemente werden gedehnt, um in den Container zu passen.

Diese CSS-Eigenschaft justify-content, die Elemente horizontal ausrichtet und die folgenden Werte akzeptiert:

flex-start: Elemente werden links im Container ausgerichtet.

flex-end: Elemente werden rechts im Container ausgerichtet.

center: Elemente werden in der Mitte des Containers ausgerichtet.

space-between: Elemente werden mit gleichmäßigem Abstand zwischen ihnen angezeigt.

space-around: Elemente werden mit gleichmäßigem Abstand um sie herum angezeigt.

Answer 5

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

  Hallo Welt!