Wie zentriert man ein absolut positioniertes Element in div?
Ich muss ein div (mit position:absolute;) Element in der Mitte meines Fensters platzieren. Ich habe jedoch Probleme damit, weil die Breite unbekannt.
Ich habe es versucht. Es muss jedoch angepasst werden, da die Breite anspricht.
.center {
left: 50%;
bottom:5px;
}
Irgendwelche Ideen?
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>Das funktioniert für mich:
#content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* Need a specific value to work */
}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>Responsive Lösung
Hier ist eine gute Lösung für responsives Design oder unbekannte Dimensionen im Allgemeinen wenn Sie nicht IE8 und niedriger unterstützen müssen.
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.outer {
position: relative; /* or absolute */
/* unnecessary styling properties */
margin: 5%;
width: 80%;
height: 500px;
border: 1px solid red;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}<div class="outer">
<div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>Der Hinweis ist, dass left: 50% relativ zum übergeordneten Element ist, während die translate-Transformation relativ zu den Elementen width/height ist.
Auf diese Weise haben Sie ein perfekt zentriertes Element mit einer flexiblen Breite für Kind und Elternteil. Bonus: Dies funktioniert auch, wenn das Kind größer ist als das Elternteil.
Sie können es auch vertikal zentrieren (und wiederum können Breite und Höhe von Eltern und Kind völlig flexibel sein (und/oder unbekannt)):
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Denken Sie daran, dass möglicherweise auch transform vendor vorangestellt werden muss. Zum Beispiel -webkit-transform: translate(-50%,-50%);
Wirklich schöner Beitrag .. wollte nur hinzufügen, wenn jemand es mit einem einzigen div-Tag machen will, dann hier der Ausweg:
width als 900px verwenden.
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
In diesem Fall sollte man die width vorher kennen.
Absolutes Zentrum
HTML:
<div class="parent">
<div class="child">
<!-- content -->
</div>
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Demo:http://jsbin.com/rexuk/2/
Getestet in Google Chrome, Firefox und IE8
Hoffe das hilft :)
diese Arbeit für vertikal und horizontal
#myContent{
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
}
und wenn Sie das Element zum übergeordneten Element machen möchten, legen Sie die Position des übergeordneten Elements fest
#parentElement{
position:relative
}
bearbeiten:
richten Sie für vertikale Mitte die eingestellte Höhe an Ihrem Element aus. Vielen Dank an @Raul
wenn Sie das Element als Mittelpunkt des übergeordneten Elements festlegen möchten, setzen Sie die Position des übergeordneten Elements auf relativ
Auf der Suche nach einer Lösung habe ich oben Antworten erhalten und konnte die Inhalte zentriert mit Matthias Weiler beantworten, jedoch mit Textausrichtung.
#content{
position:absolute;
left:0;
right:0;
text-align: center;
}
Arbeitete mit Chrome und Firefox.
Ich verstehe, dass diese Frage bereits ein paar Antworten hat, aber ich habe noch nie eine Lösung gefunden, die in fast allen Klassen funktioniert und auch sinnvoll und elegant ist. Hier ist mein Take nach dem Tweaking:
.container {
position: relative;
}
.container .cat-link {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
z-index: 100;
text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
background-color: white;
}
.color-block {
height: 250px;
width: 100%;
background-color: green;
}<div class="container">
<a class="cat-link" href="">Category</a>
<div class="color-block"></div>
</div>Was dies bedeutet, gib mir einen top: 50% und einen left: 50%, dann transformiere (schaffe Raum) auf der X/Y-Achse in den -50%-Wert, gewissermaßen "einen Spiegelraum erzeugen".
Auf diese Weise entsteht auf allen 4 Punkten eines Divs ein gleichmäßiger Abstand, der immer eine Box ist (4 Seiten).
Dieser Wille:
- Arbeiten Sie, ohne die Höhe/Breite des Elternteils zu kennen.
- Arbeiten Sie ansprechbar.
- Arbeitet entweder auf der X- oder Y-Achse. Oder beides, wie in meinem Beispiel.
- Ich kann mir keine Situation einfallen, in der es nicht funktioniert.
Funktioniert mit jeder beliebigen unbekannten Breite des absolut positionierten Elements, das Sie in der Mitte Ihres Containerelements haben möchten.
<div class="container">
<div class="box">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
</div>
.container {
position: relative;
width: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
Dies ist meines Wissens für eine unbekannte Breite nicht zu erreichen.
Sie könnten - wenn das in Ihrem Szenario funktioniert - ein unsichtbares Element mit 100% Breite und Höhe absolut positionieren und das Element dort mit dem Rand zentrieren: auto und möglicherweise vertikal ausrichten. Andernfalls benötigen Sie Javascript.
Ich möchte die Antwort von @ bobince hinzufügen:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Verbessert: /// Dadurch wird die horizontale Bildlaufleiste nicht mit großen Elementen im zentrierten Div angezeigt.
<body>
<div style="width:100%; position: absolute; overflow:hidden;">
<div style="position:fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</div>
</body>
Hier ist ein nützliches jQuery-Plugin. Gefunden hier . Ich denke nicht, dass es nur mit CSS möglich ist
/**
* @author: Suissa
* @name: Absolute Center
* @date: 2007-10-09
*/
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
el.css(css)
});
};
Meine bevorzugte Zentriermethode:
position: absolute;
margin: auto;
width: x%
- absolute Blockelementpositionierung
- marge auto
- gleich links/rechts, oben/unten
JSFiddle hier
Das hat für mich funktioniert:
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
sass/compass version von Responsive Solution oben:
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
#container
{
position: relative;
width: 100%;
float:left
}
#container .item
{
width: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
Ich weiß, dass ich bereits eine Antwort gegeben habe, und meine vorherige Antwort, zusammen mit anderen, funktioniert einwandfrei. Ich habe dies jedoch in der Vergangenheit verwendet und es funktioniert bei bestimmten Browsern und in bestimmten Situationen besser. Also dachte ich, ich gebe auch diese Antwort. Ich habe meine vorherige Antwort nicht "editiert" und sie hinzugefügt, weil ich der Meinung bin, dass dies eine völlig andere Antwort ist und die beiden, die ich angegeben habe, nicht miteinander verwandt sind.
HTML:
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
Flex kann zum Zentrieren von absolut positionierten div verwendet werden.
display:flex;
align-items:center;
justify-content:center;
.relative {
width: 275px;
height: 200px;
background: royalblue;
color: white;
margin: auto;
position: relative;
}
.absolute-block {
position: absolute;
height: 36px;
background: orange;
padding: 0px 10px;
bottom: -5%;
border: 1px solid black;
}
.center-text {
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}<div class="relative center-text">
Relative Block
<div class="absolute-block center-text">Absolute Block</div>
</div>Diese Lösung funktioniert, wenn das Element width und height hat.
.wrapper {
width: 300px;
height: 200px;
background-color: tomato;
position: relative;
}
.content {
width: 100px;
height: 100px;
background-color: deepskyblue;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}<div class="wrapper">
<div class="content"></div>
</div>Dies ist ein Trick, den ich für einen DIV gefunden habe, der genau in der Mitte einer Seite schwebt. Wirklich hässlich, funktioniert aber in allen
Punkte und Bindestriche
<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
<table style="position:fixed;" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="width:200;border: 5 dashed green;padding:10">
Perfectly Centered Content
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
Reiniger
Wow, dass fünf Jahre einfach vorbeigeflogen sind, nicht wahr?
<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="padding:10px">
<img src="Happy.PM.png">
<h2>Stays in the Middle</h2>
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
die Lösung dieser Frage hat in meinem Fall nicht funktioniert ... Ich mache eine Bildunterschrift für einige Bilder
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
figure {
position: relative;
width: 325px;
display: block
}
figcaption{
position: absolute;
background: #FFF;
width: 120px;
padding: 20px;
-webkit-box-shadow: 0 0 30px grey;
box-shadow: 0 0 30px grey;
border-radius: 3px;
display: block;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}<figure>
<img src="https://picsum.photos/325/600">
<figcaption>
But as much
</figcaption>
</figure>HTML
<div id='parent'>
<div id='centered-child'></div>
</div>
CSS
#parent {
position: relative;
}
#centered-child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
HTML:
<div class="wrapper">
<div class="inner">
content
</div>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 200px;
background: #ddd;
}
.inner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ccc;
}
Dies und noch mehr Beispiele hier
Sie können auch das Middleware-Feld div#centered mit den Eigenschaften absolute, left und right und ohne die Eigenschaft width erstellen, den Hauptinhalt div als untergeordnetes Element mit dem Feld display:inline-block festlegen und es mit dem für das übergeordnete Middleware-Feld festgelegten text-align:center zentrieren
#container{
position: relative;
width: 300px;
height: 300px;
border: solid 1px blue;
color:#dddddd;
}
#centered{
position: absolute;
text-align: center;
margin: auto;
top: 20px;
left:0;
right:0;
border: dotted 1px red;
padding: 10px 0px;
}
#centered>div{
border: solid 1px red;
display:inline-block;
color:black;
}<div id="container">
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
hello world hello world
<div id="centered">
<div>
hello world <br/>
I don't know my width<br/>
but I'm still absolute!
</div>
</div>
</div>Dies ist eine Mischung aus anderen Antworten, die für uns funktioniert haben:
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
.center {
position: absolute
left: 50%;
bottom: 5px;
}
.center:before {
content: '';
display: inline-block;
margin-left: -50%;
}
Wenn Sie auch horizontal und vertikal zentrieren müssen:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
#content { margin:0 auto; display:table; float:none;}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>Sie können das Bild in ein Div einfügen und eine Div-ID hinzufügen. Das CSS für dieses Div Muss einen text-align:center haben.
HTML:
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align:center;
}
Ein einfacher Ansatz, bei dem ich einen Block mit unbekannter Breite horizontal zentrieren konnte:
<div id="wrapper">
<div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }
Dem #block-Regelsatz kann eine Eigenschaft zum Ausrichten von Text hinzugefügt werden, um seinen Inhalt unabhängig von der Ausrichtung des Blocks auszurichten.
Dies funktionierte mit den neuesten Versionen von Firefox, Chrome, IE, Edge und Safari.