CSS 居中

居中

水平居中

1. 寬度不為100%的塊級元素居中

margin: 0 auto 
加在要居中元素自身上
001.png

HTML

<div class="container">
     <div class="block-box">
           寬度不為100%的塊級元素水平居中
     </div>
 </div>

CSS

.container {
       height: 100%;
       background: rgba(255, 126, 0, 1.0);
       padding: 50px;
 }
.block-box {
       border: 2px solid #FFF;
       width: 300px;
       height: 200px;
       margin: 0 auto;
 }

2.inline inline-block元素,文字居中

text-align:center
加在要居中元素的父級元素上

inline元素水平居中

002.png

HTML

<div class="inline-box">
      <span class="span-box">
           inline元素水平居中
      </span>
</div>

CSS

.inline-box {
         border: 2px solid #0079CC;
         height: 200px;
         margin: 30px 0;
         padding: 20px;
         text-align: center;
 }
.span-box {
        border: 2px solid #FFF;
 }

inline-block元素水平居中

003.png

HTML

 <div class="inline-block-box">
        <div class="div-box">
             inline-block元素水平居中
        </div>     
 </div>

CSS

.inline-block-box {
        border: 2px solid #0079CC;
        height: 200px;
        margin: 30px 0;
        padding: 20px;
        text-align: center;
 }
 .div-box{
        display: inline-block;
        border: 2px solid #FFF;
}

文字水平居中

004.png

HTML

<div class="single-text-box">
        單行文字水平居中
</div>
<div class="more-text-box">
        多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中，多行文字水平居中
</div>

CSS

.single-text-box{
        border: 2px solid #0079CC;
        height: 200px;
        margin: 30px 0;
        padding: 20px;
        text-align: center;
 }
.more-text-box {
       border: 2px solid #0079CC;
       height: 200px;
       margin: 30px 0;
       padding: 20px;
       text-align: center;
}

垂直居中

1. 上下pdding一樣（容器的高度有內(nèi)容撐開），適合多行文本居中

  • 添加在居中元素的父級元素上
005.png

HTML

<div class="padding-box">
       <h3 class="padding-text">padding垂直居中</h3>
       <h3 class="padding-text">padding垂直居中</h3>
       <h3 class="padding-text">padding垂直居中</h3>
</div>

CSS

.padding-box {
       border: 2px solid #0079CC;
       margin: 30px 0;
       padding: 50px 0;
 }
.padding-text {
       margin: 0;        
 }
008.png

HTML

<div class="padding-text-box">
        多行文字垂直居中,多行文字垂直居中,多行文字垂直居中,多行文字垂直居中,多行文字垂直居中,多行文字垂直居中
</div>

CSS

.padding-text-box {
       border: 2px solid #0079CC;
       margin:30px 0;
       padding: 50px;
 }

2.line-height 單行文字垂直居中(不適合多行文本)

設(shè)置元素line-height = height
006.png
007.png

HTML

<div class="line-height-box">
        單行文字垂直居中
</div>
<div class="line-height-box">
        多行文字垂直居中失敗，多行文字垂直居中失敗，多行文字垂直居中失敗，多行文字垂直居中失敗，多行文字垂直居中失敗，多行文字垂直居中失敗，多行文字垂直居中失敗，多行文字垂直居中失敗，多行文字垂直居中失敗
</div>

CSS

.line-height-box {
        border: 2px solid #0079CC;   
        margin: 30px 0;
        height: 100px;
        line-height: 100px;
 }

3. display:table-cell;vertical-align:middle垂直居中（IE8+）

(display: table-cell時margin會失效)

  • 元素添加display:table-cell;vertical-align:middle
009.png

HTML


<div class="table-cell-box">
      <div class="table-cell-text">
          table-cell垂直居中,table-cell垂直居中,table-cell垂直居中,table-cell垂直居中,table-cell垂直居中
      </div>
</div>

CSS


.table-cell-box {
        margin: 30px 0;
 }
.table-cell-text {
       border: 2px solid #0079CC;   
       height: 200px;
       display: table-cell;
       vertical-align: middle;
}

寬高不定的圖片居中

010.png

HTML


<div class="table-cell-img-box">
      <div class="table-cell-img">
           ![](img/001/001.jpeg)
      </div>
      <div class="table-cell-img">
           ![](img/001/002.jpeg)
      </div>
      <div class="table-cell-img">
           ![](img/001/003.jpeg)
      </div>
      <div class="table-cell-img">
           ![](img/001/004.jpg)
      </div>
      <div class="table-cell-img">
           ![](img/001/005.jpg)
      </div>
</div>

CSS


.table-cell-img {
       border: 2px solid #0079CC;   
       height: 300px;
       padding: 10px;
       display: table-cell;
       vertical-align: middle;
}
.table-cell-img img {
       border: 2px solid #FFF;
}

4.vertical-align:middle垂直居中(display:inline-block,inline,table-cell元素有效)

011.png

HTML

<div class="vertical-align-box">
       ![](img/001/001.jpeg)
       <p class="vertical-align-text">
           vertical-align文字圖片垂直居中
       </p>
</div>

CSS

.vertical-align-box{
     border: 2px solid #0079CC;   
     margin: 30px 0;
     padding: 10px;  
}
.vertical-align-img {
      border: 2px solid #FFF;
     margin: 0 20px;
     vertical-align: middle;
}
.vertical-align-text {
      display: inline-block;
      vertical-align: middle;
 }

水平垂直居中

1.絕對定位

transform（要求IE10+以上）

兼容性

到Can I use... Support tables for HTML5, CSS3, etc查看

017.png
012.png

HTML

<div class="absolute-box">         
       <div class="transform-img-text">
             ![](img/001/001.jpeg)
             <p>absoulute水平垂直居中</p>
        </div>
</div>

CSS


.absolute-box{
       border: 2px solid #0079CC;   
       margin: 30px 0;
       height: 500px;
       position: relative;
 }
.absolute-box img {
       border: 2px solid #A572F1;
 }
.transform-img-text {
       border: 2px solid #FFF;
       padding: 20px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%)
       text-align: center;
 }

負(fù)margin

013.png

HTML

<div class="absolute-box">
      <div class="margin-img-text">
           ![](img/001/001.jpeg)
           <p>absoulute水平垂直居中</p>
     </div>
</div>

CSS

.absolute-box{
         border: 2px solid #0079CC;   
         margin: 30px 0;
         height: 500px;
         position: relative;
 }
.absolute-box img {
         border: 2px solid #A572F1;
}
.margin-img-text {
        border: 2px solid #FFF;
        width: 300px;
        height: 300px;
        padding: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -170px;
        margin-top: -170px;
        text-align: center;
 }

2.padding + text-align/margin

text-align

014.png

HTML

<div class="padding-center-box">
        <div class="padding-center-img-text">
             ![](img/001/001.jpeg)
             <p>padding+text-align水平垂直居中</p>
        </div>
</div>

    ```

### CSS

.padding-center-box{
border: 2px solid #0079CC;
margin: 30px 0;
padding: 50px;
text-align: center;
}
.padding-center-img-text img {
border: 2px solid #A572F1;
}
.padding-center-img-text {
border: 2px solid #FFF;
padding: 20px;
display: inline-block;
}


### margin


![015.png](http://upload-images.jianshu.io/upload_images/3563580-094d48e6c262fce8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


### HTML

<div class="padding-auto-box">
<div class="padding-auto-img-text">



<p>padding+margin水平垂直居中</p>
</div>
</div>


### CSS

.padding-auto-box{
border: 2px solid #0079CC;
margin: 30px 0;
padding: 50px;
}
.padding-auto-img-text img {
border: 2px solid #A572F1;
display: inline-block;
width: 100%;
}
.padding-auto-img-text {
border: 2px solid #FFF;
padding: 20px;
width: 50%;
text-align: center;
margin: 0 auto;
}


### 3.flex

### 兼容性
到[Can I use... Support tables for HTML5, CSS3, etc]([http://caniuse.com/](http://caniuse.com/))查看


![018.png](http://upload-images.jianshu.io/upload_images/3563580-8f5e6edf074c8a81.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![016.png](http://upload-images.jianshu.io/upload_images/3563580-b5fd87c3125c7f3e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


### HTML

<div class="flex-box">
<div class="flex-img-text">



<p>flex水平垂直居中</p>
</div>
</div>


### CSS

.flex-box{
border: 2px solid #0079CC;
margin: 30px 0;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.flex-img-text img{
border: 2px solid #A572F1;
}
.flex-img-text {
border: 2px solid #FFF;
padding: 20px;
height: 300px;
text-align: center;
}


**文章著作權(quán)歸劉德銓所有，轉(zhuǎn)載須說明來源**
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,165評論 1贊 92
  • 水平居中設(shè)置-行內(nèi)元素 我們在實際工作中常會遇到需要設(shè)置水平居中的場景，比如為了美觀，文章的標(biāo)題一般都是水平居中顯...
    CAICL閱讀 504評論 0贊 3
  • 在學(xué)習(xí)前端的過程中，發(fā)現(xiàn)元素和文本的水平居中和垂直居中，是經(jīng)常會出現(xiàn)的問題，在實際工作中也會經(jīng)常碰到。居中的技巧有...
    文藝范的奔三運維青年閱讀 619評論 0贊 1
  • 默認(rèn)的HTML結(jié)構(gòu)和基本的樣式為： 水平居中 text-align：center.parent{text-alig...
    狐尼克朱迪閱讀 406評論 0贊 2
  • 早晨起來到陽臺上刷牙的時候，聽到操場上有喊口號的聲音，連續(xù)好幾天都在朦朦朧朧中進(jìn)入我的耳膜，卻一直不知道那是...
    用他的歌閱讀 1,686評論 0贊 14

友情鏈接更多精彩內(nèi)容