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

  • 添加在居中元素的父级元素上
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会失效)

  • 元素添加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;
 }

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


**文章著作权归刘德铨所有，转载须说明来源**
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,384评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,845评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,148评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,640评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,731评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,712评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,703评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,473评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,915评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,063评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,706评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2赞 352

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1赞 92
  • 慕课网笔记7 css 居中设置
    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显...
    CAICL阅读 468评论 0赞 3
  • 对css居中的一点思考
    在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有...
    文艺范的奔三运维青年阅读 547评论 0赞 1
  • CSS居中大全
    默认的HTML结构和基本的样式为： 水平居中 text-align：center.parent{text-alig...
    狐尼克朱迪阅读 351评论 0赞 2
  • 岁月催行旅，恩荣变苦辛。
    早晨起来到阳台上刷牙的时候，听到操场上有喊口号的声音，连续好几天都在朦朦胧胧中进入我的耳膜，却一直不知道那是...
    用他的歌阅读 1,624评论 0赞 14