因?yàn)楣ぷ髟颍覀兿惹鞍l(fā)過許多 Linux 相關(guān)的文章。今天是周末，恰好剛剛又參與一些涉及前端開發(fā)的項(xiàng)目，所以我們今天找到其中一個關(guān)于頁面居中的點(diǎn)，來跟大家聊一聊。

關(guān)于這個問題，在許多前端大佬看來是很簡單的事情，況且現(xiàn)在還有這么多成熟的框架可用。但是我們本著修煉技術(shù)的原則，所以不考慮用框架，只是原始的 css + js 來實(shí)現(xiàn)。

1，水平居中

行內(nèi)元素

行內(nèi)元素（比如文字，span，圖片等）的水平居中比較簡單，在其父元素中設(shè)置 text-align 為 center 即可：

text-align: center;

塊級元素

塊級元素，比如 div，其默認(rèn)寬度是100%，無所謂居中對齊。但是給定一個其他寬度的時候，比如多少像素，或者多少百分比，那就會有居中對齊的需求。這種情況下，可以利用左右 margin 來設(shè)置其水平居中對齊，如下：

.div-class {
    width: 50%;
    margin: 0 auto;
}

除了上述方式，還有一種方法可以實(shí)現(xiàn)居中對齊，那就是使用絕對定位，但是我們將它放在后面說，因?yàn)樗粌H僅可以實(shí)現(xiàn)水平居中，也可以實(shí)現(xiàn)垂直居中。

2，垂直居中

對于單行文字居中，可以設(shè)置父元素的行高來實(shí)現(xiàn)，將其行高與元素高度設(shè)置為相同的值即可：?

.font-ct {
    height: 40px;
    line-height: 40px;
}

對于多行文字，可設(shè)置如下 css（也適用于單行文字）：?

.font-ct {
    height: 100px;
    display:table-cell;
    vertical-align:middle;
}

上述 css 代碼對于行內(nèi)元素也同樣適用。

另外，對于圖片的居中對齊，一般情況使用上述代碼就可以，但是因?yàn)闉g覽器的兼容問題，在有些時候，td 中的圖片無法垂直居中，此時給 img 標(biāo)簽加上 align 屬性，應(yīng)該就可以：

<img align="absmiddle" src="">

塊元素的垂直居中，一般情況下，塊元素及其父標(biāo)簽元素高度都是給定的，所以可以事先計(jì)算出塊元素距離頂部的高度，設(shè)置 margin-top 屬性。這種方式是不太靈活，但應(yīng)該會滿足絕大多數(shù)的頁面布局需求。如果高度不定，那么可參考下面一章節(jié)。

3，水平垂直居中

水平垂直均需要居中，有一個常見的場景：比如一個彈出框，其寬度、高度均不是固定的，那么這個時候，可以使用終極武器：絕對定位。

對于絕對定位，任何時候都可以使用，主要看是不是方便。對于單一元素的布局，且在尺寸不固定的情況下，使用絕對定位是很方便的。

假如我們有如下兩個元素，.ct 為父元素，其中有一個 class 為 div 的 div 元素：?

<div class="ct">
    <div class="div"></div>
</div>

首先我們?yōu)槠湓O(shè)置定位，如下：?

.ct {
    position: relative;
}
.div {
    position: absolute;
}

對于如何讓 .div 居中，如果 .div 的尺寸是固定的，那么大可以設(shè)置其 left 和 top 值。但很不幸的是，其尺寸不固定，那么我們需要用到另外一個 css 屬性：transform。

首先，設(shè)置 .div 的位置：?

left: 50%;
top: 50%;

然后在使用 transform 屬性，讓 .div 在水平和垂直方向各做 50% 的偏移量：

transform: translate(-50%,-50%);

完整代碼如下：?

.div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

如此，即可實(shí)現(xiàn) .div 位置居中。

以上就是本次分享全部內(nèi)容。