Labākais veids, kā centrēt <div>
elementu lapā gan vertikāli, gan horizontāli?
Es zinu, ka margin-left: auto; margin-right: auto;
centrēs horizontāli, bet kāds ir labākais veids, kā to izdarīt arī vertikāli?
Mana demo dabblet.com
Galvenais triks šajā demo ir tāds, ka parastajā elementu plūsmā, kas iet no augšas uz leju, margin-top: auto
ir iestatīts uz nulli. Tomēr absolūti pozicionēts elements rīkojas tāpat, lai sadalītu brīvo vietu, un līdzīgi to var centrēt vertikāli pie norādītā top
un bottom
(nedarbojas IE7).
div
izmēru.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div></div>
Šeit ir skripts, ko es uzrakstīju pirms kāda laika (tā ir rakstīts, izmantojot jQuery bibliotēku):
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();
};