De beste manier om een <div>
-element op een pagina te centreren, zowel verticaal als horizontaal?
Ik weet dat margin-left: auto; margin-right: auto;
centreert op horizontaal, maar wat is de beste manier om dit ook verticaal te doen?
Antwoord 1, autoriteit 100%
De beste en meest flexibele manier
De belangrijkste truc in deze demo is dat in de normale stroom van elementen van boven naar beneden gaat, dus de margin-top: auto
is ingesteld op nul. Een absoluut gepositioneerd element werkt echter hetzelfde voor de verdeling van vrije ruimte en kan op dezelfde manier verticaal worden gecentreerd op de gespecificeerde top
en bottom
(werkt niet in IE7).
##Deze truc werkt met elke grootte van div
.
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
Antwoord 2, autoriteit 19%
Hoewel dit niet werkte toen de OP deze vraag stelde, denk ik dat, in ieder geval voor moderne browsers, de beste oplossing is om display: flexof pseudo-klassen.
Je kunt een voorbeeld zien in de volgende viool.
Hier is de bijgewerkte viool.
Voor pseudo-klassenkan een voorbeeld zijn:
.centerPseudo {
display:inline-block;
text-align:center;
}
.centerPseudo::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
width:0px;
}
Het gebruik van display: flex, volgens css-trucsen MDNis als volgt:
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
Er zijn andere attributen beschikbaar voor flex, die worden uitgelegd in bovengenoemde links, met meer voorbeelden.
Als je oudere browsers moet ondersteunen, die geen css3 ondersteunen, dan moet je waarschijnlijk javascript gebruiken of de vaste breedte/hoogte-oplossing die in de andere antwoorden wordt getoond.
Antwoord 3, autoriteit 14%
Eenvoud van deze techniek is verbluffend:
(Deze methode heeft echter zijn implicaties, maar als je alleen het element hoeft te centreren, ongeacht de stroom van de rest van de inhoud, is het prima. Gebruik het met zorg)
Mark-up:
<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>
En 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%);
}
Hiermee wordt het element ook horizontaal en verticaal gecentreerd. Geen negatieve marges, maar kracht van transformaties. Ook zouden we IE8 al moeten vergeten, nietwaar?
Antwoord 4, autoriteit 11%
Ik zou translate
gebruiken:
Plaats eerst de linkerbovenhoek van de div in het midden van de pagina (gebruik position: fixed; top: 50%; left: 50%
). Vervolgens verplaatst translate
het met 50% van de hoogte van de div om het verticaal op de pagina te centreren. Ten slotte verplaatst translate de div ook naar rechts met 50% van zijn breedte om hem horizontaal te centreren.
Ik denk eigenlijk dat deze methode beter is dan veel van de andere, omdat er geen wijzigingen aan het bovenliggende element nodig zijn.
translate
is in sommige scenario’s beter dan translate3d
omdat het door een groter aantal browsers wordt ondersteund. https://caniuse.com/#feat=transforms2d
Samengevat: deze methode wordt ondersteund in alle versies van Chrome, Firefox 3.5+, Opera 11.5+, alle versies van Safari, IE 9+ en Edge.
.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>
Antwoord 5, autoriteit 4%
Eenvoudige oplossing die profiteert van 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>
Bekijk http://css-tricks.com/snippets /css/a-guide-to-flexbox/
De eerste div beslaat het hele scherm en heeft een display:flex set voor elke browser. De tweede div (gecentreerde div) maakt gebruik van de display:flex div waar margin:auto uitstekend werkt.
OpmerkingIE11+-compatibiliteit. (IE10 met voorvoegsel).
Antwoord 6, autoriteit 3%
Ik denk dat er twee manieren zijn om een div-centrum uit te lijnen via CSS.
.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 */
}
Dit is de eenvoudige en beste manier. Ga voor de demo naar onderstaande link:
http://w3webpro.blogspot. in/2013/07/how-to-make-div-horizonally-and.html
Antwoord 7, autoriteit 3%
Als je kijkt naar de nieuwe browsers (IE10+),
dan kun je de eigenschap transform gebruiken om een div in het midden uit te lijnen.
<div class="center-block">this is any div</div>
En css hiervoor zou moeten zijn:
.center-block {
top:50%;
left: 50%;
transform: translate3d(-50%,-50%, 0);
position: absolute;
}
De vangst hier is dat je niet eens de hoogte en breedte van de div opgeven als het zorgt er voor zichzelf.
Ook als u wilt een div te positioneren in het midden van een andere div, dan kun je gewoon moet u de positie van de buitenste div als relatieve en dan begint dit CSS werken voor uw div.
Hoe het werkt:
Als u de optie links en boven op 50%, de div gaat ten rechtsonder kwart van de pagina met de top-links einde vastgemaakt aan het midden van de pagina.
Dit is omdat, de links / top eigenschappen (indien in% gegeven) worden berekend op basis van de hoogte van de buitenste div (in uw geval, venster).
Maar toepassingen transformeren hoogte / breedte van het element om vertaling te bepalen, zodat u de div wordt naar links (50% breedte) en de bovenkant (50% de hoogte), omdat ze worden gegeven in negatieven, dus af te stemmen op het midden van de pagina.
Als u oudere browsers (en sorry waaronder IE9 ook) ondersteunen dan de tabel cel meest populaire methode om gebruik te maken.
Antwoord 8, autoriteit 2%
Hier is een script dat ik een tijdje geleden heb geschreven (het is geschreven met behulp van de jQuery-bibliotheek):
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();
};
Antwoord 9, autoriteit 2%
Dit is de beste code om de div-bot horizontaal en verticaal te centreren
div
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
Antwoord 10
Ik weet dat ik te laat ben op het feest, maar hier is een manier om een div met een onbekende dimensie te centreren in een ouder met een onbekende dimensie.
stijl:
<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:
Bekijk deze demo.
Antwoord 11
Hoewel ik te laat ben, maar dit is heel gemakkelijk en eenvoudig. Het midden van de pagina is altijd 50% links en de bovenste 50%. Dus minus de div breedte en hoogte 50% en stel linkermarge en rechtermarge in. Ik hoop dat het overal werkt –
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>
Antwoord 12
2018-manier met CSS-raster:
.parent{
display: grid;
place-items: center center;
}
Controleer op browserondersteuning, Caniusesuggereert dat het werkt vanuit Chrome 57, FF 52, Opera 44, Safari 10.1, Edge 16. Ik heb het zelf niet gecontroleerd.
Zie fragment hieronder:
.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>
Antwoord 13
div {
border-style: solid;
position: fixed;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
Links en boven aanpassen met betrekking tot breedte en hoogte, dat wil zeggen (100% – 80%) / 2 = 10%
Antwoord 14
Er is eigenlijk een oplossing, met behulp van css3, die een div van onbekende hoogte verticaal kan centreren. De truc is om de div met 50% naar beneden te verplaatsen en vervolgens transformY
te gebruiken om hem weer in het midden te krijgen. De enige vereiste is dat het te centreren element een bovenliggend element heeft. Voorbeeld:
<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%);
}
Ondersteund door alle belangrijke browsers, en IE 9 en hoger (maak je geen zorgen over IE 8, want het stierf samen met win xp dit najaar. Godzijdank.)
Antwoord 15
Oplossing
Slechts twee regels CSS gebruiken, gebruikmakend van de magische kracht van Flexbox
.parent { display: flex; }
.child { margin: auto }
Antwoord 16
Nog een methode (kogelvrij) overgenomen van hiergebruikmakend van de ‘display:table’-regel:
Mark-up
<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;
}
Antwoord 17
Ik keek naar het weergavebestand van Laravel en merkte dat ze de tekst perfect in het midden centreerden. Ik herinnerde me deze vraag meteen.
Dit is hoe ze het deden:
<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>
Het resultaat ziet er zo uit:
Antwoord 18
Een alternatief antwoord is dit.
<div id="container">
<div id="centered"> </div>
</div>
en de 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;
}
Antwoord 19
Het verbaast me dat dit nog niet is genoemd, maar de eenvoudigste manier om dit te doen is door de hoogte, marge (en breedte, als je wilt) in te stellen met behulp van kijkvensters.
Zoals u wellicht weet, is de totale hoogte van de viewport = 100vh.
Stel dat je wilt dat de height
van je container 60% (60vh) van het scherm beslaat, dan kun je de rest (40vh) gelijk verdelen tussen de boven- en ondermarge zodat het element zichzelf uitlijnt in de automatisch centreren.
Door margin-left
en margin-right
in te stellen op auto
, zorgt u ervoor dat de container horizontaal wordt gecentreerd.
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}
<div class="container">
</div>
Antwoord 20
Als je een gedefinieerde maat weet voor je div
, kun je calc
gebruiken.
Live voorbeeld: https://jsfiddle.net/o8416eq3/
Opmerkingen: dit werkt alleen als je de breedte en hoogte van je “div` hard hebt gecodeerd in de CSS.