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

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

1，水平居中

行內(nèi)元素

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

text-align: center;

塊級(jí)元素

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

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

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

2，垂直居中

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

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

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

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

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

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

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

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

3，水平垂直居中

水平垂直均需要居中，有一個(gè)常見(jiàn)的場(chǎng)景：比如一個(gè)彈出框，其寬度、高度均不是固定的，那么這個(gè)時(shí)候，可以使用終極武器：絕對(duì)定位。

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

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

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

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

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

對(duì)于如何讓 .div 居中，如果 .div 的尺寸是固定的，那么大可以設(shè)置其 left 和 top 值。但很不幸的是，其尺寸不固定，那么我們需要用到另外一個(gè) 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 位置居中。

以上就是本次分享全部?jī)?nèi)容。