it-swarm.com.de

Beste Möglichkeit, ein <div> vertikal und horizontal auf einer Seite zu zentrieren?

Die beste Methode, um ein <div> -Element vertikal und horizontal auf einer Seite zu zentrieren?

Ich weiß, dass margin-left: auto; margin-right: auto; in der Horizontalen zentriert wird, aber wie geht das am besten auch vertikal?

492
J-Dog

Der beste und flexibelste Weg

Meine Demo auf dabblet.com

Der Haupttrick in dieser Demo ist, dass im normalen Fluss der Elemente von oben nach unten, also der margin-top: auto auf Null gesetzt wird. Ein absolut positioniertes Element wirkt sich jedoch auf die Verteilung des freien Speicherplatzes gleich aus und kann in ähnlicher Weise vertikal auf die angegebenen Werte top und bottom zentriert werden (funktioniert in IE7 nicht).

Dieser Trick funktioniert mit jeder Größe von div.

div {
        width: 100px;
        height: 100px;
        background-color: red;
        
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        
        margin: auto;
}
<div></div>
683

Auch wenn dies nicht funktionierte, als das OP diese Frage stellte, denke ich, ist die beste Lösung für moderne Browser die Verwendung von display: flex oder Pseudoklassen .

Sie können ein Beispiel im folgenden sehen Geige . Hier ist die aktualisierte Geige .

Für Pseudoklassen könnte ein Beispiel sein:

.centerPseudo {
    display:inline-block;
    text-align:center;
}

.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
}

Die Verwendung von display: flex nach css-tricks und MDN ist wie folgt folgt:

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

Für flex stehen weitere Attribute zur Verfügung, die in den oben genannten Links mit weiteren Beispielen erläutert werden.

Wenn Sie ältere Browser unterstützen müssen, die CSS3 nicht unterstützen, sollten Sie wahrscheinlich Javascript oder die in den anderen Antworten gezeigte Lösung mit fester Breite/Höhe verwenden.

125
tombul

Die Einfachheit dieser Technik ist atemberaubend:
(Diese Methode hat zwar Auswirkungen, aber wenn Sie das Element nur zentrieren müssen, unabhängig vom Fluss des restlichen Inhalts, ist dies in Ordnung. Vorsichtig verwenden)

Markup:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>

Und CSS:

div {
  color: white;
  background: red;
  padding: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}   

Dadurch wird das Element auch horizontal und vertikal zentriert. Keine negativen Margen, nur Kraft der Transformationen. Auch sollten wir den IE8 schon vergessen, nicht wahr?

83
robjez

Ich würde translate verwenden:

Positionieren Sie zuerst die obere linke Ecke des Divs in der Mitte der Seite (mit position: fixed; top: 50%; left: 50%). Dann wird es durch translate um 50% der Div-Höhe nach oben verschoben, um es vertikal auf der Seite zu zentrieren. Schließlich verschiebt die Verschiebung auch das Div um 50% seiner Breite nach rechts, um es horizontal zu zentrieren.

Ich denke tatsächlich, dass diese Methode besser als viele der anderen ist, da es keine Änderungen am übergeordneten Element erfordert.

translate ist in einigen Szenarien besser als translate3d, da es von einer größeren Anzahl von Browsern unterstützt wird. http://caniuse.com/#search=translate

Zusammenfassend lässt sich sagen, dass diese Methode von allen Versionen von Chrome, Firefox 3.5+, Opera 11.5+, allen Versionen von Safari, IE 9+ und Edge unterstützt wird.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  
  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}
<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>

Beachten Sie jedoch, dass diese Methode dieses div an einer Stelle belässt, während die Seite gescrollt wird. Dies kann sein, was Sie wollen, aber wenn nicht, gibt es eine andere Methode.


Wenn wir nun dasselbe CSS versuchen, aber die Position auf absolut gesetzt ist, befindet es sich in der Mitte des letzten übergeordneten Elements, das eine absolute Position hat.

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}
<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>
67
MDTech.us_MAN

Ich denke, es gibt zwei Möglichkeiten, ein Div Center durch CSS auszurichten.

.middleDiv {
    position : absolute;    
    width    : 200px;
    height   : 200px;
    left     : 50%;
    top      : 50%;
    margin-left : -100px; /* half of the width  */
    margin-top  : -100px; /* half of the height */
}

Dies ist der einfachste und beste Weg. Für die Demo besuchen Sie bitte den folgenden Link:

http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html

22
user2555501

Einfache Lösung mit Flex Display

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

Check out http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Das erste Div nimmt den gesamten Bildschirm ein und hat ein Display: Flex für jeden Browser eingestellt. Das zweite Div (zentriertes Div) nutzt die Anzeige: flex div, wobei margin: auto hervorragend funktioniert.

Hinweis IE11 + Kompatibilität. (IE10 mit Präfix).

21
Ulad Kasach

Wenn Sie sich die neuen Browser (IE10 +) ansehen,

dann können Sie die Eigenschaft transform verwenden, um ein div in der Mitte auszurichten.

<div class="center-block">this is any div</div>

Und CSS dafür sollte sein:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

Der Haken dabei ist, dass Sie nicht einmal die Höhe und Breite des Divs angeben müssen, da dies von selbst erledigt wird.

Wenn Sie ein Div in der Mitte eines anderen Divs positionieren möchten, können Sie einfach die Position des äußeren Divs als relativ angeben, und dann funktioniert dieses CSS für Ihr Div.

Wie es funktioniert:

Wenn Sie "links" und "oben" auf 50% festlegen, wird das Div im unteren rechten Viertel der Seite angezeigt, wobei sich das obere linke Ende in der Mitte der Seite befindet. Dies liegt daran, dass die Eigenschaften für links/oben (wenn in% angegeben) auf der Grundlage der Höhe des äußeren Bereichs (in Ihrem Fall Fenster) berechnet werden.

Bei der Transformation wird die Höhe/Breite des Elements verwendet, um die Übersetzung zu bestimmen. Sie bewegen sich also nach links (50% Breite) und nach oben (50% Höhe), da sie als Negative angegeben sind, und richten sie so an der Mitte der Seite aus.

Wenn Sie ältere Browser (und leider auch IE9) unterstützen müssen, ist die Tabellenzelle die beliebteste Methode.

18
Kop4lyf

Meine bevorzugte Methode, eine Box vertikal und horizontal zu zentrieren, ist die folgende Technik:

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

Das Inhaltsfeld

  • sollte display: inline-block; haben
  • sollte die horizontale Textausrichtung neu einstellen, um z. text-align: left; oder text-align: right;, es sei denn, Sie möchten, dass der Text zentriert wird

Die Eleganz dieser Technik ist, dass Sie Ihre Inhalte zum Inhaltsfeld hinzufügen können, ohne sich um Höhe oder Breite sorgen zu müssen!

Demo

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    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">
        You can put anything here!
     </div>
   </div>
</div>

Siehe auch this Fiddle !


BEARBEITEN

Ja, ich weiß, dass Sie mit transform: translate(-50%, -50%); oder transform: translate3d(-50%,-50%, 0); mehr oder weniger dieselbe Flexibilität erreichen können. Die von mir vorgeschlagene Technik bietet eine weitaus bessere Browserunterstützung. Selbst mit Browser-Präfixen wie -webkit, -ms oder -moz, transform wird nicht die gleiche Browser-Unterstützung geboten.

Wenn Sie sich also für ältere Browser (z. B. IE9 und niedriger) interessieren, sollten Sie transform nicht zur Positionierung verwenden.

15
John Slegers
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

Erläuterung:

Geben Sie ihm eine absolute Position (der Elternteil sollte relative Position haben). Dann wird die obere linke Ecke in die Mitte verschoben. Da Sie die Breite/Höhe noch nicht kennen, verwenden Sie die CSS-Transformation, um die Position relativ zur Mitte zu verschieben. translate (-50%, -50%) reduziert die x- und y-Position der oberen linken Ecke um 50% der Breite und Höhe.

14
AmazingTurtle

Hier ist ein Skript, das ich vor einiger Zeit geschrieben habe (es wird mit der jQuery-Bibliothek geschrieben):

var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
        return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};
13
Andreas Grech

Dies ist der beste Code, um den Div-Bot horizontal und vertikal zu zentrieren

div
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
11
Owais

Ich weiß, dass ich zu spät zur Party komme, aber hier ist eine Möglichkeit, eine Div mit unbekannter Dimension in einem übergeordneten Element mit unbekannter Dimension zu zentrieren.

stil:

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>

HTML:

<div class="table">
    <div class="table-cell"><div class="centered">centered</div></div>
</div>

DEMO:

Check out this Demo .

8
Asur

Verwendung von Flex-Box meiner Meinung nach:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="parent">
  <div id="child">Hello World!</div>
</div>

Sie sehen, dass Sie nur drei CSS-Eigenschaften verwenden müssen, um das untergeordnete Element vertikal und horizontal zu zentrieren. display: center; Führen Sie den Hauptteil aus, indem Sie einfach die Flex-Box-Anzeige aktivieren, justify-content: center; das untergeordnete Element vertikal zentrieren und align-items: center; es horizontal zentrieren. Um das beste Ergebnis zu erzielen, füge ich einfach einige zusätzliche Stile hinzu:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
  background: yellow;
}

#child {
  width: 100px;
  height: 100px;
  background: silver;
}
<div id="parent">
  <div id="child">Hello World!</div>
</div>

Wenn Sie mehr über Flex-Box erfahren möchten, besuchen Sie W3Schools , MDN oder CSS-Tricks für weitere Informationen.

8
Morteza Sadri

Es gibt tatsächlich eine Lösung mit css3, mit der ein Div von unbekannter Höhe vertikal zentriert werden kann. Der Trick besteht darin, den Div um 50% nach unten zu verschieben und ihn dann mit transformY wieder in die Mitte zu bringen. Einzige Voraussetzung ist, dass das zu zentrierende Element ein übergeordnetes Element hat. Beispiel:

<div class="parent">
    <div class="center-me">
        Text, images, whatever suits you.
    </div>
</div>

.parent { 
    /* height can be whatever you want, also auto if you want a child 
       div to be responsible for the sizing */ 
    height: 200px;
}

.center-me { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Unterstützt von allen gängigen Browsern und IE 9 und höher (kümmern Sie sich nicht um IE 8, da es diesen Herbst zusammen mit win xp starb. Gott sei Dank.)

JS Fiddle Demo

6
giorgio
div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

Passen Sie links und oben in Bezug auf Breite und Höhe an, dh (100% - 80%)/2 = 10%

6
winuxde

2018 Weg mit CSS Grid:

.parent{
    display: grid;
    place-items: center center;
}

Auf Browserunterstützung prüfen, Caniuse schlägt vor, dass es mit Chrome 57, FF 52, Opera 44, Safari 10.1, Edge 16 funktioniert. Ich habe mich selbst nicht überprüft .

Siehe folgenden Ausschnitt:

.parent{
    display: grid;
    place-items: center center;
    /*place-items is a shorthand for align-items and justify-items*/
    
    height: 200px;
    border: 1px solid black;
    background: gainsboro;
}

.child{
    background: white;
}
<div class="parent">
    <div class="child">Centered!</div>
</div>
5
1valdis

Eine weitere Methode (kugelsicher) aus hier unter Verwendung der 'display: table'-Regel:

Markup

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}
5
robjez

Lösung

Verwenden Sie nur zwei Zeilen CSS und nutzen Sie die magische Kraft von Flexbox

.parent { display: flex; }
.child { margin: auto }
5
user2182102

Ich schaute in Laravels Ansichtsdatei und bemerkte, dass sie den Text perfekt in der Mitte zentrierten. Ich erinnerte mich sofort an diese Frage. So haben sie es gemacht:

<html>
<head>
    <title>Laravel</title>

    <!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->

    <style>
        .container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: table;

        }

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


    </style>
</head>
<body>
    <div class="container">
            <div class="inside">This text is centered</div>
    </div>
</body>

Ergebnis sieht so aus:

enter image description here

5
Tebe

Ich bin zwar zu spät, aber das ist sehr einfach und unkompliziert. Die Seitenmitte bleibt immer bei 50% und die oberen 50%. Also abzüglich der div Breite und Höhe 50% und setzen Sie den linken und rechten Rand. Hoffe, es funktioniert überall -

body{
  background: #EEE;
}
.center-div{
  position: absolute;
  width: 200px;
  height: 60px;
  left: 50%;  
  margin-left: -100px;
  top: 50%;
  margin-top: -30px;
  background: #CCC;
  color: #000;
  text-align: center;
}
<div class="center-div">
  <h3>This is center div</h3>
</div>
4
Mahfuzur Rahman

Eine alternative Antwort wäre this .

<div id="container"> 
    <div id="centered"> </div>
</div>

und das CSS:

#container {
    height: 400px;
    width: 400px;
    background-color: lightblue;
    text-align: center;
}

#container:before {
    height: 100%;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

#centered {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}
4
István

Ich bin überrascht, dass dies noch nicht erwähnt wurde, aber der einfachste Weg, dies zu tun, besteht darin, Höhe, Rand (und Breite, wenn Sie möchten) mithilfe von Ansichtsfenstergrößen festzulegen.
Wie Sie vielleicht wissen, beträgt die Gesamthöhe des Ansichtsfensters 100 vh.
Soll der height Ihres Containers 60% (60 vh) des Bildschirms einnehmen, können Sie den Rest (40 vh) gleichmäßig zwischen dem oberen und dem unteren Rand aufteilen, sodass sich das Element selbst ausrichtet in der Mitte automatisch.
Wenn Sie margin-left und margin-right auf auto einstellen, wird sichergestellt, dass der Behälter horizontal zentriert ist.

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }
<div class="container">
</div>
4
Rocks

Falls Sie eine definierte Größe für Ihr div kennen, können Sie calc verwenden.

Live-Beispiel: https://jsfiddle.net/o8416eq3/

Anmerkungen: Dies funktioniert nur, wenn Sie die Breite und Höhe Ihres `` div`` im CSS fest programmiert haben.

#target {
  position:fixed;
  top: calc(50vh - 100px/2);
  left: calc(50vw - 200px/2);
  width:200px;
  height:100px;
  background-color:red;
}
<div id='target'></div>
3
GibboK

Verwenden Sie display:grid für das übergeordnete Element und setzen Sie margin:auto auf das mittlere Element, um Folgendes auszuführen:

Siehe unten Schnipsel:

html,body {
  width :100%;
  height:100%;
  margin:0;
  padding:0;
}

.container {
  display:grid;
  height:90%;
  background-color:blue;
}

.content {
  margin:auto;
  color:white;
}
<div class="container">
  <div class="content"> cented div  here</div>
</div>
3
Springer F

Wenn Sie mit JQuery arbeiten, können Sie dies mit .position() tun.

<div class="positionthis"></div>

CSS

.positionthis {
    width:100px;
    height:100px;
    position: absolute;
    background:blue;
}

Javascript (JQuery)

$(document).ready(function () {
    $('.positionthis').position({
        of: $(document),
        my: 'center center',
        at: 'center center',
        collision: 'flip flip'
    });
});

JSFiddle: http://jsfiddle.net/vx9gV/

3
div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */           
}
<body>
    <div>Div to be aligned vertically</div>
</body>

position: absolut div in body document

Ein Element mit Position: absolut; wird relativ zum nächsten positionierten Vorfahren positioniert (anstelle von relativ positioniert zum Ansichtsfenster (Body-Tag), wie behoben).

Jedoch; Wenn ein absolut positioniertes Element keine positionierten Vorfahren hat, verwendet es den Dokumentkörper und bewegt sich mit dem Blättern durch die Seiten.

quelle: CSS-Position

3
antelove

Diese Lösung hat bei mir funktioniert

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(oder Höhe: 70%/Boden: 15%

höhe: 40%/Boden: 30% ...)

2
Dany Y

Wenn der Browser dies unterstützt, ist die Verwendung von translate sehr leistungsfähig.

position: absolute;
background-color: red;

width: 70%;     
height: 30%; 

/* The translate % is relative to the size of the div and not the container*/ 
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);
2

Bitte verwenden Sie die folgenden CSS-Eigenschaften, um das Element horizontal und vertikal auszurichten. Das ist gut für mich gearbeitet.

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}
1
Suraj Kavade

Entschuldigung für die verspätete Antwort

  div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }

der obere Rand und der linke Rand sollten Ihrer Div-Box-Größe entsprechen

0
Ashish