CSS居中方案匯總全家桶

水平居中垂直 / 垂直居中是前端開發中常見的需求,今天就總結一下各式各樣的水平 / 垂直居中,為方面描述,以下代碼中外層div統一類名為.wrapper。

以下代碼均在http://js.jirengu.com/?html,css,js,output 上運行并展示

1. 水平居中

1.1 內聯元素水平居中

在內聯元素的外層div上用text-align: center

.wrapper {
  text-align: center;
}
1.2 定寬塊級元素水平居中

直接margin: 0 auto; 當然上下外邊距可以隨便設 注意必須是固定寬度的塊級元素!

問:為什么?

不是固定寬度的話塊級元素默認為100%父級寬度談何居中?

1.3.1 多個塊級元素水平居中(inline-block方法)
 <div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
 </div>
.wrapper {
  text-align: center;
  border: 1px solid #ccc;  /*為了看的清晰加上外層邊框*/
}
.inner {
  width: 200px;
  height: 200px;
  background: red;
  border: 1px solid #ccc;  /*子盒子也加上邊框*/
  display: inline-block;
}

展示效果:


image.png

但這種方法有一個問題!
當頁面寬度不夠時變會變形


image.png

如果需要保持居中不變形,可以在body上加上min-width,讓頁面小于一定寬度時出現滾動條。
1.3.2 多個塊級元素水平居中(flex-box方法)

用flex布局可以輕松實現多個塊級元素水平居中,并且頁面寬度不夠時不會出現變形,但會調整每個子元素的寬度和高度。

.wrapper {
  display: flex;
  justify-content: center;
}

最終效果:


image.png

寬度不夠時:


image.png

2. 垂直居中

2.1.1 單行文本垂直居中(padding填充)

上下填充高度一致即可

span {
  padding: 10px 0;
}
2.1.2 單行文本垂直居中(行高控制)

在外層元素上設置line-height等于height,如果外層元素未設置高度,會以line-height高度作為高度

.wrapper {
  height: 100px;
  line-height: 100px;
}
2.2.1 多行文本垂直居中(padding填充)

同上。

2.2.2 多行文本垂直居中(table-cell展示)

不做詳細介紹,不常用,需要可以google

2.2.3 多行文本垂直居中(flex)

注意:此方法只在外層元素定高時有效,且flex布局會將內部子元素變成block類型!!!

.wrapper {
  height: 200px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
2.3.1 定高塊級元素垂直居中

利用子元素相對父級絕對定位和負邊距

.wrapper {
  position: relative
}
.child {  /*要居中的塊級元素*/
  position: absolute;
  top: 50%;
  height: 100px;  
  margin-top: -50px;  
}
2.3.2 不定高塊級元素垂直居中

將2.3.1的margin-top改為

  transform: translateY(-50%);
2.3.3 任意塊級元素垂直居中(flex)

會將居中元素內的文本也垂直居中

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

3. 水平垂直居中

3.1 定高

絕對定位+負邊距

3.2 不定高

絕對定位+transform: translate(-50%,-50%);

3.3 flex
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
3.4 grid布局

尚未學習,可自行Google~

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • CSS 是什么 css(Cascading Style Sheets),層疊樣式表,選擇器{屬性:值;屬性:值}h...
    崔敏嫣閱讀 1,508評論 0 5
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關注微信itclanCoder公眾號可收聽更多音頻 前言 關于網...
    itclanCoder閱讀 8,204評論 3 30
  • H5移動端知識點總結 閱讀目錄 移動開發基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,614評論 0 26
  • shell腳本中的函數與子shell 函數 函數的使用 bash中也有函數。一個函數就是一個子程序,是用于實現一串...
    Fengya閱讀 7,267評論 2 51