整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
設(shè)計(jì)是帶有主觀色彩的，同樣網(wǎng)頁設(shè)計(jì)中的 css 一樣讓人摸不頭腦。網(wǎng)上列舉的實(shí)現(xiàn)方式一大把，或許在這里你都看到過，但既然來到這里我希望這篇能讓你看有所收獲，畢竟這也是前端面試的基礎(chǔ)。
1、text-align 方式
text-align 是入門最常用的屬性，根據(jù)字面意思是文本對(duì)齊用的。
只需在父級(jí)標(biāo)簽上設(shè)置即可，雖然內(nèi)部的子元素不管是塊級(jí)元素 or 非塊級(jí)元素都可以使用，但需注意塊級(jí)元素會(huì)占用整行的寬度，文本是在這個(gè)寬度中作水平居中。
代碼舉例
頁面效果
2、定寬 margin auto 方式
這也是常見的水平居中方式，通過設(shè)置子元素的 margin 屬性來控制距離父元素的距離。需要注意：子元素如果是塊級(jí)元素，就最好設(shè)置寬度，不然就會(huì)占滿于父元素，在通過 text-align 文本居中對(duì)齊就沒有意義了。對(duì)于非塊級(jí)元素必須要設(shè)置寬度。
代碼舉例
頁面效果
3、flex 方式
通過設(shè)置浮動(dòng)布局來實(shí)現(xiàn)居中，這是相對(duì)上兩種方法某種程度上最簡(jiǎn)單的實(shí)現(xiàn)，因?yàn)樵谄浠A(chǔ)上可以做更多布局的擴(kuò)展，不用擔(dān)心破壞布局。
如果你不了解 flex 布局，可以看下這個(gè)鏈接：
https://eminoda.github.io/2018/08/20/css-flex/
設(shè)置 justify-content 輕松搞定定位：
代碼舉例
頁面效果
4、position + 浮動(dòng) 方式
現(xiàn)在這兩種是比較有趣的定位方式，實(shí)際場(chǎng)景不建議使用，我是不愿意別人這樣寫，腦袋還要轉(zhuǎn)個(gè)彎，來理解這樣布局的計(jì)算方式。
如果元素是塊級(jí)元素，通過 float 浮動(dòng)屬性，將它的寬度“抹去”。然后通過對(duì)于上級(jí)元素的相對(duì)定位通過錯(cuò)位修正的方式來居中。
讓父元素的左側(cè)從中間開始定位，子元素再根據(jù)自己的實(shí)際寬度往左偏移一半達(dá)到水平居中的目的。
代碼舉例
頁面效果
5、position + transform 方式
思路同上，不同的是這次設(shè)置子元素為絕對(duì)定位，并距離左側(cè)偏離一半，最后通過 transform 根據(jù)元素的實(shí)際寬度往左再偏移一半，達(dá)到居中效果。
代碼舉例
頁面效果
上面只列舉了 5 種水平居中的實(shí)現(xiàn)方法，相信還要更多的方式。不過不管哪種方法，能在業(yè)務(wù)代碼實(shí)踐中最快速、最準(zhǔn)確的運(yùn)用才是最佳實(shí)踐。
希望在讀的各位能有所收獲。
一名工作在一線的前端工程師，樂于實(shí)踐，并分享前端開發(fā)經(jīng)驗(yàn)。
關(guān)注【前端雨爸】，歡迎評(píng)論留言，愿與各位交流進(jìn)步。
點(diǎn)擊 ↙ 了解更多，了解更多前端開發(fā)技術(shù)文章。！
. 元素高度聲明的情況下在父容器中居中：絕對(duì)居中法
<div class="parent">
<div class="absolute-center"></div>
</div>
.parent {
position: relative;
}
.absolute-center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 70%;
width: 70%;
}
優(yōu)點(diǎn)：
1.跨瀏覽器，包括 IE8-10
2.無需其他冗余標(biāo)記，CSS 代碼量少
3.完美支持圖片居中
4.寬度高度可變，可用百分比
缺點(diǎn)：
1.必須聲明高度2. 負(fù)外邊距：當(dāng)元素寬度高度為固定值時(shí)。設(shè)置 margin-top/margin-left 為寬度高度一 半的相反數(shù)，top:50%;left:50%
<div class="parent">
<div class="negative-margin-center"></div>
</div>
.parent {
position: relative;
}
.negative-margin-center {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
height: 300px;
width: 300px;
}
優(yōu)點(diǎn)：
良好的跨瀏覽器特性，兼容 IE6-7
代碼量少
缺點(diǎn)：
不能自適應(yīng)，不支持百分比尺寸和 min-/max-屬性設(shè)置
內(nèi)容可能溢出容器
邊距大小域與 padding，box-sizing 有關(guān)3. CSS3 Transform 居中：
<div class="parent">
<div class="transform-center"></div>
</div>
.parent {
position: relative;
}
.transform-center {
position: absolute;
left: 50%;
top: 50%;
margin: auto;
width: 50%;
-webkit-transform: translate(-50%， -50%);
-moz-transform: translate(-50%， -50%);
transform: translate(-50%, -50%);
}
優(yōu)點(diǎn)：
內(nèi)容高度可變
代碼量少
缺點(diǎn)：
IE8 不支持
屬性需要瀏覽器廠商前綴
可能干擾其他 transform 效果4. table-cell 居中：
們?cè)谑褂胏ss來布局時(shí)經(jīng)常需要進(jìn)行居中，有時(shí)一個(gè)屬性就能搞定，有時(shí)則需要一定的技巧才能兼容到所有瀏覽器，利用css來實(shí)現(xiàn)對(duì)象的垂直居中有許多不同的方法，比較難的是應(yīng)該選擇哪種正確的方法。比如我們都知道 margin:0 auto;的樣式能讓元素水平居中，而margin: auto;卻不能做到垂直居中……下面就css居中的一些常用方法做個(gè)集中的介紹。
首先是水平居中，最簡(jiǎn)單的辦法當(dāng)然就是：
margin:0 auto;
利用line-height設(shè)為height的一樣即可：
eg:
.div {
width：200px；
height: 200px;
line-height: 200px;/*實(shí)現(xiàn)垂直居中的關(guān)鍵*/
text-align:center;
font-size: 36px;
background-color: #ccc;
}
父容器元素：position: relative，子元素：position:absolute;
eg:
<div class="box">
<div class="content"></div>
</div>
<style>
.box{position:relative;width:200px;height:200px;background:#999;}
.content{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:#C9F;}
</style>
效果如下所示：
！注意：高度必須定義，建議加 overflow: auto，防止內(nèi)容溢出。
介紹一下CSS3中的display:flex來實(shí)現(xiàn)的水平垂直居中的方法。
eg：
<div class="parent">
<div class="children">我是通過flex的水平垂直居中噢！</div>
</div>
<style>
.parent {
display:flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
width:200px;
height:200px;
background-color:green;
}
.children {
background-color:blue;
color:#FFF;
}
</style>
效果如下所示：
這種方式最為簡(jiǎn)便，就是兼容性不好，不過隨著時(shí)間的前進(jìn)，各大瀏覽器一定會(huì)都兼容的。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
