我爱编程

CSS 居中

2017-01-03  本文已影响0人  YBTK

居中

水平居中

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一样（容器的高度有内容撑开），适合多行文本居中

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 单行文字垂直居中(不适合多行文本)

设置元素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会失效)

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;
 }

负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](https://img.haomeiwen.com/i3563580/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](https://img.haomeiwen.com/i3563580/8f5e6edf074c8a81.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![016.png](https://img.haomeiwen.com/i3563580/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;
}


**文章著作权归刘德铨所有，转载须说明来源**
上一篇下一篇

猜你喜欢

热点阅读