So positionieren Sie ein Element absolut von der Mitte - CSS

Question

Für einen Client muss ich ein absolutes Div auf der linken Seite des Körpers mit einer Werbung zusammenstellen. Der einzige Weg, wie ich das bisher geschafft habe, ist ein absolutes Div. Das Problem hier ist, dass in der absolut positionierten div gibt es einen schwarzen Raum (das ist das Ende des Körpers) und ich muss diese "Gutter Space" ad die Seite umarmen.

Um dies zu berücksichtigen, ist es die beste Methode, eine bestimmte Anzahl von Pixeln von der Mitte der Seite entfernt zu positionieren. Ich dachte ich, das durch den folgenden Code tun könnte:

position: absolute; 
left:50%; 
margin-right:500px; 

Dies ist jedoch nur die div in der Mitte der Seite hält. Ist es möglich, ein absolutes Div von der Mitte einer Seite zu positionieren?

Answer 1

Wenn Sie die Breite der Anzeige kennen, dann können Sie dies tun:

position:absolute; 
left:50%; 
margin-left:-250px; 
width:500px; 

Mitteilung der negative margin-left die Hälfte der Breite des Elements positioniert werden

Answer 2

Wenn Breite nicht festgelegt ist können Sie tun:

position: absolute; 
left: 20%; 
top: 20%; 
height: 60%; 
width: 60%; 

Proof here.

Answer 3

Sie ist machen ein div-Container in der Mitte, und platzieren Sie Ihre div innen es so aus:

<style type="text/css"> 
#container { 
    position: relative; 
    left:50%; 
    padding-right:500px; 
} 
#left { 
    position:absolute; 
    left:-500px; 
} 

</style> 

<div id="container"> 
    <div id="left">a</div> 
</div> 

Answer 4

Sie brauchen nicht unbedingt es absolute Position geben .. Sie können den Standardüberlauf behaviou ausnutzen r von Blockelementen .. Zum Beispiel könnten Sie das gewünschte Ergebnis durch die Verwendung eines Code wie folgt erreichen:

MARKUP:

<div id="adbox"> 
    <div class="content"> 
     <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh odio, sollicitudin vel sodales vel, dignissim sed lacus. Praesent sed erat sed turpis gravida congue. Nulla facilisi. Nunc eros eros, auctor et auctor in, tempor quis magna. Curabitur in justo libero.</a> 
    </div> 
</div> 
<div id="main-content"> 
    <p>Curabitur iaculis, dolor eu interdum fermentum, mi mauris vulputate est, tempus rhoncus leo dolor nec orci. Duis a ante augue. Suspendisse potenti. Proin luctus ultrices ligula, ac luctus lorem pellentesque non. Curabitur sit amet eros dui, quis laoreet felis.</p> 
</div> 

STYLE:

#adbox { 
    width: 400px; 
    height: 0px; 
    position: relative; 
    z-index: 0; 
    margin: 0 auto; 
} 
#adbox .content { 
    background: #EEE; 
} 
#main-content { 
    width:300px; 
    margin: 0 auto; 
    position: relative; 
    z-index: 1; 
    background: #CCC; 
} 
#main-content p { 
    padding: 0 5px; 
} 

IE Warnung: in IE < = 6 die height prope rty wird wie jeder andere Browser mit min-height interpretiert: Vielleicht möchten Sie einen bestimmten Stil hinzufügen, um dieses Problem zu beheben.

---

Oder könnten Sie unbedingt auf die Anzeigenposition und gehen auf diese Weise: http://jsfiddle.net/bssxg/10/

#adbox { width: 400px; position: absolute; z-index: 0; top: 0; left: 50%; margin-left: -200px; } 

(die linke negative Marge ist gleich der Hälfte der Breite des Anzeigenfeld)

Answer 5

Sie kann leicht in CSS tun.Arbeiten in allen gängigen Browsern

<style type="text/css"> 
    #outer{ 
     width:100%; 
     height:250px; 
     background:#232323; 
     position:relative; 
    } 

    #inner{ 
     position:absolute; 
     width:300px; 
     height:200px; 
     background:red; 
     top:0; 
     left:50%; /*Important*/ 
     margin:-150px; /* WIDTH/2 */ 
    } 
</style> 

<div id="outer"> 
    <div id="inner"> 
    </div> 
</div> 

Answer 6

Dies würde den Trick

.centered { 
    //Assume image is 100 in height and 200 in width 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; // applying a negative top margin of half the images height 
    margin-left: -100px; // applying negative left margin of half the images width 
} 

Answer 7

Wenn Sie etwas zu zentrieren und halten Sie sie ansprechbar Breite/Höhe, dann können Sie Darstellungseinheiten & mit guten browser support

verwenden

Durch Festlegen der Breite, Höhe und Ränder eines Elements in Ansichtsfenstereinheiten können Sie es zentrieren, ohne weitere Tricks zu verwenden.

Hier hat dieses Rechteck eine Höhe von 60vh und obere und untere Ränder von 20vh, was zu einer 100vh (60 + 2 * 20) macht es immer zentriert, auch auf Fenstergröße.

#rectangle{ 
    width: 60vw; 
    height: 60vh; 
    margin: 20vh auto; 
} 

mehr here