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