建站
咨詢
售后
建站咨詢
新聞中心
因?yàn)楣ぷ髟?，我們先前發(fā)過許多 Linux 相關(guān)的文章。今天是周末，恰好剛剛又參與一些涉及前端開發(fā)的項(xiàng)目，所以我們今天找到其中一個(gè)關(guān)于頁面居中的點(diǎn)，來跟大家聊一聊。
為墨脫等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及墨脫網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、墨脫網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
關(guān)于這個(gè)問題，在許多前端大佬看來是很簡(jiǎn)單的事情，況且現(xiàn)在還有這么多成熟的框架可用。但是我們本著修煉技術(shù)的原則，所以不考慮用框架，只是原始的 css + js 來實(shí)現(xiàn)。
1，水平居中
行內(nèi)元素
行內(nèi)元素（比如文字，span，圖片等）的水平居中比較簡(jiǎn)單，在其父元素中設(shè)置 text-align 為 center 即可：
text-align: center;
塊級(jí)元素
塊級(jí)元素，比如 div，其默認(rèn)寬度是100%，無所謂居中對(duì)齊。但是給定一個(gè)其他寬度的時(shí)候，比如多少像素，或者多少百分比，那就會(huì)有居中對(duì)齊的需求。這種情況下，可以利用左右 margin 來設(shè)置其水平居中對(duì)齊，如下：
.div-class {
width: 50%;
margin: 0 auto;
}除了上述方式，還有一種方法可以實(shí)現(xiàn)居中對(duì)齊，那就是使用絕對(duì)定位，但是我們將它放在后面說，因?yàn)樗粌H僅可以實(shí)現(xiàn)水平居中，也可以實(shí)現(xiàn)垂直居中。
2，垂直居中
對(duì)于單行文字居中，可以設(shè)置父元素的行高來實(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覽器的兼容問題，在有些時(shí)候，td 中的圖片無法垂直居中，此時(shí)給 img 標(biāo)簽加上 align 屬性，應(yīng)該就可以：
塊元素的垂直居中，一般情況下，塊元素及其父標(biāo)簽元素高度都是給定的，所以可以事先計(jì)算出塊元素距離頂部的高度，設(shè)置 margin-top 屬性。這種方式是不太靈活，但應(yīng)該會(huì)滿足絕大多數(shù)的頁面布局需求。如果高度不定，那么可參考下面一章節(jié)。
3，水平垂直居中
水平垂直均需要居中，有一個(gè)常見的場(chǎng)景：比如一個(gè)彈出框，其寬度、高度均不是固定的，那么這個(gè)時(shí)候，可以使用終極武器：絕對(duì)定位。
對(duì)于絕對(duì)定位，任何時(shí)候都可以使用，主要看是不是方便。對(duì)于單一元素的布局，且在尺寸不固定的情況下，使用絕對(duì)定位是很方便的。
假如我們有如下兩個(gè)元素，.ct 為父元素，其中有一個(gè) class 為 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)容。
網(wǎng)頁名稱：前端開發(fā)中的各種居中問題，小小總結(jié)一下
網(wǎng)站鏈接：http://www.fisionsoft.com.cn/article/djijpsc.html
