Ik moet een div(met position:absolute;) element in het midden van mijn venster plaatsen. Maar ik heb hier problemen mee, omdat de breedte niet bekend is.
Ik heb dit geprobeerd. Maar het moet worden aangepast omdat de breedte reageert.
.center {
left: 50%;
bottom: 5px;
}
Hoe kan ik dat doen?
Antwoord 1, autoriteit 100%
<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>Antwoord 2, autoriteit 92%
Dit werkt voor mij:
#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>Antwoord 3, autoriteit 66%
Responsieve oplossing
Hier is een goede oplossing voor responsief ontwerp of onbekende afmetingenin het algemeen als u IE8 en lager niet hoeft te ondersteunen.
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
Antwoord 4, autoriteit 3%
Ik wilde alleen toevoegen of iemand het met een enkele div-tag wil doen, dan is dit de uitweg:
widthnemen als 900px.
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
In dit geval moet men vooraf de widthweten.
Antwoord 5, autoriteit 2%
Absoluut centrum
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/
Het is getest in Google Chrome, Firefox en Internet Explorer 8.
Antwoord 6, autoriteit 2%
Dit werkt voor verticaal en horizontaal:
#myContent{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
En als je een element in het midden van de ouder wilt maken, stel dan de positie van de bovenliggende relatieve in:
#parentElement{
position: relative
}
-
Voor verticale uitlijning in het midden, stelt u de hoogte in op uw element. Met dank aan Raul.
-
Als u een element in het midden van de ouder wilt maken, stelt u de positie van de ouder in op relatief
Antwoord 7, autoriteit 2%
<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
This text is centered.
</div>
Hiermee worden alle objecten binnen div gecentreerd met het positietype statisch of relatief.
Antwoord 8, autoriteit 2%
Responsieve oplossing
Ervan uitgaande dat het element in de div een andere div is…
Deze oplossing werkt prima:
<div class="container">
<div class="center"></div>
</div>
De containerkan elke grootte hebben (moet relatief ten opzichte van de positie zijn):
.container {
position: relative; /* Important */
width: 200px; /* Any width */
height: 200px; /* Any height */
background: red;
}
Het element (div) kan ook elke grootte hebben (moet kleiner zijn dan de container):
.center {
position: absolute; /* Important */
top: 50%; /* Position Y halfway in */
left: 50%; /* Position X halfway in */
transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
width: 100px; /* Any width */
height: 100px; /* Any height */
background: blue;
}
Het resultaat ziet er als volgt uit. Voer het codefragment uit:
.container {
position: relative;
width: 200px;
height: 200px;
background: red;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: blue;
}<div class="container">
<div class="center"></div>
</div>Antwoord 9, autoriteit 2%
Als u ook horizontaal en verticaal moet centreren:
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Antwoord 10, autoriteit 2%
Op zoek naar een oplossing, kreeg ik de vorige antwoorden en kon ik inhoud gecentreerd maken met Matthias Weiler’s antwoord, maar met text-align:
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
Het werkte met Google Chrome en Firefox.
Antwoord 11
Ik begrijp dat deze vraag al een paar antwoorden heeft, maar ik heb nog nooit een oplossing gevonden die in bijna alle klassen zou werken, die ook logisch en elegant is, dus hier is mijn mening na een aantal aanpassingen:
.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>Antwoord 12
Dit is een mix van andere antwoorden die voor ons hebben gewerkt:
.el {
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
}
Antwoord 13
Dit werkt op elke willekeurige onbekende breedte van het absoluut gepositioneerde element dat u in het midden van uw containerelement wilt hebben:
<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;
}
Antwoord 14
flexbox kan worden gebruikt om een absolute gepositioneerde div te centreren.
display: flex;
align-items: center;
justify-content: center;
Antwoord 15
Voor zover ik weet, is dit onmogelijk om te bereiken voor een onbekende breedte.
U zou kunnen – als dat in uw scenario werkt – absoluut een onzichtbaar element met 100% breedte en hoogtepositie en laat het element gecentreerd met behulp van marge: Auto en mogelijk verticaal-uitlijnen. Anders heb je Javascript nodig om dat te doen.
Antwoord 16
Ik wil graag toevoegen aan Bobince’s antwoord :
<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>
Verbeterde: /// Dit maakt de horizontale schuifbalk niet verschijnen met grote elementen in de gecentreerde div.
<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>
Antwoord 17
Hier is een nuttige jQuery-plug-in om dit te doen. Ik vond het hier . Ik denk niet dat het puur is met CSS.
/**
* @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)
});
};
Antwoord 18
sass / Compass versie van een vorige responsieve oplossing :
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
Antwoord 19
Dit werkte voor mij:
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
Antwoord 20
My Preferred Centering-methode:
position: absolute;
margin: auto;
width: x%
- absolute blok element positionering
- marge auto
- hetzelfde links / rechts, boven- / onderkant
A JSFIDDLE is hier .
Antwoord 21
#container
{
position: relative;
width: 100%;
float: left
}
#container .item
{
width: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
Antwoord 22
HTML:
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
Ik weet dat ik al een antwoord heb gegeven, en mijn vorige antwoord, samen met anderen gegeven, werk prima. Maar ik heb dit in het verleden gebruikt en het werkt beter op bepaalde browsers en in bepaalde situaties. Dus ik dacht dat ik dit antwoord ook zou geven. Ik heb mijn vorige antwoord niet “bewerken” en voeg het toe omdat ik het gevoel heb dat dit een volledig afzonderlijk antwoord is en de twee die ik heb verstrekt, zijn niet gerelateerd.
Antwoord 23
De geaccepteerde oplossing van deze vraag werkte niet voor mijn zaak …
Ik doe een bijschrift voor sommige afbeeldingen en ik loste deze op:
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>Antwoord 24
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;
}
Antwoord 25
Deze oplossing werkt als het element widthen height
heeft
.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>Antwoord 26
.center {
position: absolute
left: 50%;
bottom: 5px;
}
.center:before {
content: '';
display: inline-block;
margin-left: -50%;
}
Antwoord 27
Dit is een truc die ik heb bedacht om een DIV precies in het midden van een pagina te laten zweven. Het is natuurlijk erg lelijk, maar het werkt in alle browsers.
Punten en streepjes
<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>
Schoonmaker
Wauw, die vijf jaar vlogen voorbij, nietwaar?
<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>
</div>
Antwoord 28
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;
}
Deze en meer voorbeelden .
Antwoord 29
Een eenvoudige aanpak die voor mij werkte om horizontaal een blok van onbekende breedte te centreren:
<div id="wrapper">
<div id="block"></div>
</div>
#wrapper {
position: absolute;
width: 100%;
text-align: center;
}
#block {
display: inline-block;
}
Er kan een tekst-uitlijnende eigenschap aan de #block-regelset worden toegevoegd om zijn inhoud onafhankelijk van de uitlijning van het blok uit te lijnen.
Dit werkte aan recente versies van Firefox, Chrome, Internet & Nbsp; Explorer, Edge en Safari.
ANTWOORD 30
#content { margin:0 auto; display:table; float:none;}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>