Hoe lijn ik de hele html-body uit met het midden?
Antwoord 1, autoriteit 100%
Ik kwam zojuist dit oude bericht tegen, en hoewel ik zeker weet dat user01 zijn antwoord al lang heeft gevonden, merkte ik dat de huidige antwoorden niet helemaal werken. Nadat ik een beetje had gespeeld met de informatie van de anderen, vond ik een oplossing die werkte in IE, Firefox en Chrome. In CSS:
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
}
body {
display: table-cell;
vertical-align: middle;
}
Dit is bijna identiek aan het antwoord van abernier, maar ik ontdekte dat het toevoegen van de breedte de centrering zou verbreken, net als het weglaten van de automatische marge. Ik hoop dat iemand anders die op dit onderwerp struikelt, mijn antwoord nuttig zal vinden.
Opmerking:Laat html, body { height: 100%; }om alleen horizontaal te centreren.
Antwoord 2, autoriteit 37%
Je kunt het proberen:
body{ margin:0 auto; }
Antwoord 3, autoriteit 17%
BEWERKEN
Vanaf vandaag kunt u met flexbox
body {
display:flex; flex-direction:column; justify-content:center;
min-height:100vh;
}
VORIG ANTWOORD
html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}
Antwoord 4, autoriteit 9%
Als ik één ding heb dat ik graag wil delen met betrekking tot CSS, dan is het MIJN FAVORIETE MANIER OM DINGEN LANGS BEIDE ASSEN TE CENTEREN!!!
Voordelen van deze methode:
- Volledige compatibiliteit met browsers die mensen daadwerkelijk gebruiken
- Geen tabellen vereist
- Zeer herbruikbaar om andere elementen in hun bovenliggende element te centreren
- Herbergt ouders en kinderen met dynamische (veranderende) dimensies!
Ik doe dit altijd door 2 klassen te gebruiken: een om het bovenliggende element te specificeren, waarvan de inhoud wordt gecentreerd (.centered-wrapper), en de tweede om aan te geven welk kind van het bovenliggende element is gecentreerd (.centered-content). Deze 2e klas is handig in het geval dat de ouder meerdere kinderen heeft, maar er slechts 1 gecentreerd hoeft te zijn).
In dit geval is bodyde .centered-wrapperen een binnenste divis .centered-content.
<html>
<head>...</head>
<body class="centered-wrapper">
<div class="centered-content">...</div>
</body>
</html>
Het idee voor centreren is nu om van .centered-contenteen inline-blockte maken. Dit zal gemakkelijkhorizontaal centreren vergemakkelijken, via text-align: center;, en ook verticaal centreren zoals je zult zien.
.centered-wrapper {
position: relative;
text-align: center;
}
.centered-wrapper:before {
content: "";
position: relative;
display: inline-block;
width: 0; height: 100%;
vertical-align: middle;
}
.centered-content {
display: inline-block;
vertical-align: middle;
}
Dit geeft je 2 echt herbruikbare klassen voor het centreren van elk kind in elke ouder! Voeg gewoon de klassen .centered-wrapperen .centered-contenttoe.
Dus, wat is er aan de hand met dat :beforeelement? Het vergemakkelijkt vertical-align: middle;en is nodig omdat verticale uitlijning niet relatief is aan de hoogte van de ouder – verticale uitlijning is relatief aan de hoogte van de langste broer of zus!!!. Daarom, door ervoor te zorgen dat er een broer of zus is wiens lengte de lengte van de ouder is (100% hoogte, 0 breedte om het onzichtbaar te maken), weten we dat verticale uitlijning zal zijn met betrekking tot de lengte van de ouder.
Nog één ding: u moet ervoor zorgen dat uw tags htmlen bodyde grootte van het venster hebben, zodat centreren naar hen hetzelfde is als centreren naar de browser !
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
Fiddle: https://jsfiddle.net/gershy/g121g72a/
Antwoord 5, autoriteit 6%
http://bluerobot.com/web/css/center1.html
body {
margin:50px 0;
padding:0;
text-align:center;
}
#Content {
width:500px;
margin:0 auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
Antwoord 6, autoriteit 6%
Ik gebruik flexbox op html. Voor een leuk effect kunt u het chroom van de browser aanpassen om uw inhoud in te kaderen op schermformaten die groter zijn dan uw paginamaxima. Ik vind dat #eeeeeeredelijk goed overeenkomt. Je zou een kaderschaduw kunnen toevoegen voor een mooi zwevend effect.
html{
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: center;
align-items: center;
height:100%;
margin: 0;
padding: 0;
background:#eeeeee;
}
body {
margin: 0;
flex: 0 1 auto;
align-self: auto;
/*recommend 1920 / 1080 max based on usage stats, use 100% to that point*/
width: 100%
max-width: 900px;
height: 100%;
max-height: 600px;
background:#fafafa;
-webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
}
afbeelding/gegevens met dank StatCounter
Antwoord 7, autoriteit 6%
Schrijf gewoon
<body>
<center>
*Your Code Here*
</center></body>
Antwoord 8, autoriteit 5%
Probeer dit
body {
max-width: max-content;
margin: auto;
}
Antwoord 9, autoriteit 3%
<style>
body{
max-width: 1180px;
width: 98%;
margin: 0px auto;
text-align: left;
}
</style>
Pas deze stijl toe voordat u CSS toepast. U kunt de breedte naar wens wijzigen.
Antwoord 10
En dit:
- indien breedte: 60%, dan marge links: (1-60%)/2 = 20%;
- indien hoogte: 50%, dan margin-top: (1-50%)/2=25%;
Dat geldt ook voor marge-onder en marge-rechts;
<style type="text/css">
html {
height: 100%;
}
body {
width: 60%;
height: 50%;
margin: 25% 20% 25% 20%;
border: 1px solid;
}
</style>