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

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

        Text Here

Noch ein Beispiel:

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}

        SERVICE IN BANGLADESH FLEET RESERVE  AND  RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE

Answer 2

• Zugang 6

  /Ändern Sie die Einheiten in "%", "px" oder was auch immer/

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

  Links Rechts

  .container{ 
             width: 50%;  //Ihre Containerbreite hier
             height: 50%; //Ihre Containerhöhe hier
             position: absolute; 
             top: 0; 
             right: 0;  
             bottom: 0; 
             left: 0; 
             margin: auto;
  }

Answer 3

Ich sehe dies als den kürzesten und einfachsten Weg. Es hängt jedoch von der Breite und Höhe des Elements ab. Bitte zögern Sie nicht, die Prozentsätze bei translate(50%, 50%); weiter anzupassen.

.divContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
}

Ich bin zentriert

Answer 4

Dies ist ein verwandtes Problem, auf das die Leute möglicherweise stoßen, wenn sie diese Seite suchen: Wenn ich ein div für ein "warte..." 100px Quadrat animiertes gif zentrieren möchte, verwende ich:

.centreDiv {
    position: absolute;
    top:     -moz-calc(50vh - 50px);
    top:  -webkit-calc(50vh - 50px);
    top:          calc(50vh - 50px);
    left:    -moz-calc(50vw - 50px);
    left: -webkit-calc(50vw - 50px);
    left:         calc(50vw - 50px);
    z-index: 1000; /* was auch immer erforderlich ist */
}

Answer 5

Der einfachste flexbox Ansatz:

Der einfachste Weg, um ein einzelnens Element vertikal und horizontal zu zentrieren, ist es zu einem Flex-Element zu machen und den Rand auf auto zu setzen:

Wenn Sie automatische Ränder auf ein Flex-Element anwenden, wird dieses Element automatisch seinen festgelegten Rand erweitern, um den zusätzlichen Platz im Flex-Container auszufüllen...

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

.flex-item {
  margin: auto;
}

    Dies sollte zentriert sein!

Diese Erweiterung der Ränder in jede Richtung wird das Element genau in die Mitte seines Containers verschieben.