Ik heb een divtag met widthingesteld op 800 pixels . Wanneer de browserbreedte groter is dan 800 pixels , mag het de divniet strekken, maar het moet het naar het midden van de pagina brengen.
1, Autoriteit 100%
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
2, Autoriteit 28%
position: absoluteen dan top:50%en left:50%Plaatst de bovenrand in het verticale midden van het scherm, en de linkerrand in het horizontale centrum, vervolgens door het toevoegen van margin-toptot het negatieve van de hoogte van de div, dwz -100 verschuift het boven door 100 en op dezelfde manier voor margin-left. Dit krijgt de divprecies in het midden van de pagina.
#outPopUp {
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
background: red;
}<div id="outPopUp"></div>3, Autoriteit 12%
Flexbox-oplossing is de juiste keuze in/vanaf 2015. justify-content: centerwordt gebruikt voor het bovenliggende element om de inhoud uit te lijnen met het midden ervan.
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.center {
width: 800px;
}
Uitvoer
Antwoord 4, autoriteit 6%
-
Bedoel je dat je het verticaal of horizontaal wilt centreren? U zei dat u de
heightop 800 pixels had gespecificeerd en dat u de div niet wilde uitrekken als dewidthgroter was dan dat… -
Als u horizontaal wilt centreren, kunt u het kenmerk
margin: auto;in CSS gebruiken. U moet er ook voor zorgen dat de elementenbodyenhtmlgeen marge of opvulling hebben:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Antwoord 5, autoriteit 5%
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
Antwoord 6, autoriteit 3%
Om het ook in Internet Explorer 6 correct te laten werken, moet je het als volgt doen:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
Antwoord 7, autoriteit 3%
Je kunt het ook als volgt gebruiken:
<div style="width: 60%; margin: 0px auto;">
Your contents here...
</div>
Antwoord 8, autoriteit 2%
Div verticaal en horizontaal gecentreerd binnen de ouder zonder de inhoudsgrootte vast te leggen
Hier op deze paginais een mooi overzicht met verschillende oplossingen, te veel code om hier te delen, maar het laat zien wat er mogelijk is…
Persoonlijk vind ik deze oplossingmet de beroemde transformatie vertaalt -50% het meest. Het werkt goed voor zowel vaste (% of px) als ongedefinieerde hoogte en breedte van je element.
De code is zo simpel als:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* for IE 9 */
-webkit-transform: translate(-50%, -50%); /* for Safari */
/* optional size in px or %: */
width: 100px;
height: 100px;
}
Hier een viooldie laat zien dat het werkt
Antwoord 9, autoriteit 2%
Dit kan eenvoudig worden bereikt via een flexcontainer.
.container{
width: 100%;
display: flex;
height: 100vh;
justify-content: center;
}
.item{
align-self: center;
}
Antwoord 10, autoriteit 2%
Gebruik gewoon de center-tag net na de body-tag en beëindig de center-tag net voor bodyeindigt:
<body>
<center>
... Your code here ...
</center>
</body>
Dit werkte voor mij met alle browsers die ik heb geprobeerd.
Antwoord 11
Voeg deze klasse toe aan de div die je gecentreerd wilt hebben (die een ingestelde breedte moet hebben):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
Of voeg de marge-dingen toe aan uw div-klasse, zoals dit:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
Antwoord 12
Gebruik de CSS flex-eigenschap: http://jsfiddle.net/cytr/j7SEa/6/show/
body { /* Centered */
display: box;
flex-align: center;
flex-pack: center;
}
13
Enkele andere reeds bestaande setups van de oudere code die DIV-pagina-centrering L & AMP; R zijn:
- Andere klassen verborgen in externe stylesheet links.
- Andere klassen ingebed in iets als een
img(zoals voor oudere externe CSS-afdrukformaatregelaars). - Legend Code met ID’s en / of klassen zal conflicteren met een genoemde
divklasse.
14
centreren zonder DIV-breedte op te geven:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
Dit is zoiets als <center>tag doet, behalve:
- alle directe inline-kinderelementen (bijv.
<h1>) van<center>WORDT OOK POSITEDERD OP CENTER - Inline-blockelement kan verschillende grootte hebben (uiteengezet naar
display:blockinstelling) volgens browser standaardinstellingen
15
Gebruik de onderstaande code voor het centreren van het DIV-vak:
.box-content{
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 800px;
height: 100px;
background-color: green;
}<div class="box-content">
</div>16
parent {
position: relative;
}
child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}<parent>
<child>
</child>
</parent>17
Gebruik justify-contenten align-itemsom horizontaal en verticaal een div
uit te lijnen
https://developper.mozilla.org/de/docs/ Web / CSS / rechtvaardiging-inhoud
https://developer.mozilla.org/en/docs/web/css / align-items
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}<div class="container">
<div class="mydiv">h & v aligned</div>
</div>18
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
“width:100%” voor de tag “body” is slechts een voorbeeld. In een echt project mag u deze eigenschap verwijderen.
Antwoord 19
.middle {
margin:0 auto;
text-align: center;
}
/* het brengt div naar het midden */
Antwoord 20
Eenvoudige http://jsfiddle.net/8pd4qx5r/
html {
display: table;
height: 100%;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 260px;
text-align: center;
background: pink;
}
Antwoord 21
Dit werkt ook in Internet Explorer, maar automatische marges niet.
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
Antwoord 22
Als de inhoud van je centrum zich diep in andere div’s bevindt, kan alleen marge je redden. Niks anders. Ik heb er altijd last van als ik geen framework gebruik zoals Bootstrap.
Antwoord 23
In mijn geval is de schermgrootte van de telefoon onbekend, en dit is wat ik deed.
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JavaScript (Voordat u deze div wilt weergeven)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
24
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
Als u de verticale positie wilt wijzigen, wijzigt u de waarde van 250 en kunt u de inhoud regelen volgens uw behoefte. Het is niet nodig om de breedte en andere parameters te geven.
25
Om de een of andere reden werkte geen van de vorige antwoorden echt voor mij. Dit is wat voor mij gewerkt en het werkt ook door browsers:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
26
- Verkrijg de breedte van het scherm.
- Maak vervolgens de marge 25%
- Maak marge rechts 25%
Op deze manier zit de inhoud van uw container in het midden.
Voorbeeld: Stel dat containerbreedte = 800px;
<div class='container' width='device-width' id='updatedContent'>
<p id='myContent'></p>
<contents></contents>
<contents></contents>
</div>
if ($("#myContent").parent === $("updatedContent"))
{
$("#myContent").css({
'left': '-(device-width/0.25)px';
'right': '-(device-width/0.225)px';
});
}