Labākais veids, kā centrēt <div> lapā vertikāli un horizontāli?

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?

John Slegers
Rediģēts jautājums 1priekšpusdienari1t maijā 2018 в 10:41
Programmēšana
html css alignment vertical-alignment centering
10pēcpusdienari2t decembrī 2008 в 5:11
8 skati

Labākais un elastīgākais veids

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).

Šis triks darbojas ar jebkuru 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>
Community
Rediģēta atbilde 27priekšpusdienari2t februārī 2019 в 5:50
Komentāri (14)

Š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();
};
Andreas Grech
Rediģēta atbilde 25priekšpusdienari3t decembrī 2008 в 10:13
Komentāri (3)

Šis risinājums man palīdzēja

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(vai augstums : 70% / apakšdaļa : 15%

augstums : 40% / apakšā :30% ...)

Komentāri (1)