wake-up-neo.com

Wie zentriere ich ein Element horizontal und vertikal?

Ich versuche, den Tab-Inhalt vertikal zu zentrieren, aber wenn ich den CSS-Code display:inline-flex hinzufüge, wird der horizontale Textauszug nicht mehr angezeigt.

Wie kann ich für jede meiner Registerkarten beide Textausrichtungen x und y 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>

htmlcsscss3
282
shuji

  • Ansatz 1 - transformtranslateXtranslateY:

    _/Beispiel hier / Vollbild Beispiel

    In unterstützten Browsern (die meisten von ihnen) können Sie top: 50%left: 50% in Kombination mit translateX(-50%) translateY(-50%) verwenden, 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

    Setzen Sie in unterstützten Browsern die display des Zielelements auf flex und verwenden Sie align-items: center für die vertikale Zentrierung und justify-content: center für die horizontale 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-cellvertical-align: middle:

    _/Beispiel hier / Vollbild Beispiel

    In einigen Fällen müssen Sie sicherstellen, dass die Höhe des htmlbody-Elements auf 100% eingestellt ist.

    Setzen Sie für vertikale Ausrichtung width/height des übergeordneten Elements auf 100% und fügen Sie display: table hinzu. Ändern Sie dann für das untergeordnete Element display in table-cell und fügen Sie vertical-align: middle hinzu.

    Für die horizontale Zentrierung können Sie entweder text-align: center hinzufügen, um den Text und andere untergeordnete inline-Elemente zu zentrieren. Alternativ können Sie margin: 0 auto verwenden, vorausgesetzt das Element ist block-Ebene.

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 positionierter 50% von oben mit Verschiebung:

    _/Beispiel hier / Vollbild Beispiel

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

    Beispiel hier

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

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

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

519
Josh Crozier

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 möchten Sie links nicht verwenden: 50% bei der negativen Übersetzung, da in IE9 + ein Überlauffehler vorliegt. Verwenden Sie einen positiven rechten Wert, und Sie sehen keine horizontalen Bildlaufleisten.

16
Mr Bullets

Die beste Möglichkeit, um eine Box vertikal und horizontal zu zentrieren, besteht darin, zwei Container zu verwenden:

Der äußere Behälter:

  • sollte display: table; haben

Der innere Behälter:

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

Die Inhaltsbox:

  • sollte display: inline-block; haben
  • sollte die horizontale Textausrichtung anpassen, sofern der Text nicht zentriert werden soll

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

Zentrierung in der Mitte der Seite:

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

  • 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 this Fiddle !

6
John Slegers

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>

3
tocqueville

    .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

2
Krishna

So verwenden Sie 2 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 100 vh 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>
1
Creaforge

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

Diese CSS-Eigenschaft aligns-items vertical und akzeptiert die folgenden Werte:

flex-start : Elemente werden an der Oberseite des Containers ausgerichtet.

flex-end : Elemente werden am Boden des Containers ausgerichtet.

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

Baseline : Elemente werden an der Baseline des Containers angezeigt.

stretch : Die Artikel werden an den Behälter angepasst.

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

flex-start : Elemente werden an der linken Seite des Containers ausgerichtet.

flex-end : Elemente werden auf der rechten Seite des Containers ausgerichtet.

center : Elemente werden in der Mitte des Containers ausgerichtet.

Abstand zwischen : Elemente werden mit gleichem Abstand angezeigt.

space-around : Elemente werden mit gleichem Abstand um sie herum angezeigt.

1
Divyanshu Rawat

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>

1
JFathi

um das 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 andere 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>
1
Moes

Ein anderer Ansatz ist die Verwendung der 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>

1
iamcoming

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

1
Manish62

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>

0
Tomasz Zieliński

Der einfachste Weg, ein Div sowohl vertikal als auch horizontal zu zentrieren, ist der folgende:

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

Ein weiteres 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>
0
Bablu Ahmed
  • 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;
    }
0
derp

Einfach! Verwenden Sie Display-Flex auf Container und Rand automatisch auf 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. (alles letzte Aktualisierung am 25. Februar 2019) 

0
Diego Favero

Dies erreichen Sie mit CSS (Ihrem Element display:inline-grid + grid-auto-flow: row;). Raster und Flex Box (übergeordnetes Element display:flex;). 

Siehe unten 

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

0
Springer F

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>
0
yoginder bagga