CSS各种居中实现方式

原文地址:CSS各种居中实现方式

CSS居中是每次布局都需要面对的问题,但是同一个居中方法并不是任何元素都能使用的,内联元素和块级元素的居中方式各不相同,下面我就对它们分别进行讨论和总结。

内联元素


内联元素的特点

  • 和其他元素都在一行上
  • 设置高度height 无效,可以通过line-height来设置
  • 设置margin和padding只有左右有效,上下无效
  • 宽度就是它的文字或图片的宽度,不可改变
  • 内联元素只能容纳文本或者其他内联元素

以下实例都是基于下面的html代码:

        <div class="out">
            <span class="in">
                居中元素
            </span>
        </div>

水平居中

  1. 父元素样式设置为text-align:center,里面包含的行内元素居中,如果父元素内部还存在包含文字且不定宽的块元素,那么这个块元素也会居中。

         .out{
              text-align: center;
             }
    
  2. 父元素样式设置为display:flex; justify-content:center,里面包含的行内元素居中。

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

垂直居中

  1. 单行文本:可将其父元素的高度和行高设置为相等的值 height = line-height

         .out{
            height: 100px;
            line-height: 100px;
         }
    
  2. 多行文本:用一个span标签将所有的文字封装起来,再用一个容器包裹span,设置属性display: table-cell;vertical-align: middle。这种方法同样适用于使图片居中。

        .out{
            display: table-cell;
            vertical-align: middle;
         }
    
  3. 父元素样式设置为display:flex; align-items: center,里面包含的行内元素居中。

         .out{
             display:flex;
             align-items: center;
         }   
    

块级元素


块级元素的特点

  • 总是在新行上开始,占据一整行
  • 高度,行高以及外边距和内边距都可控制
  • 宽度缺省是它的容器的100%,除非设定一个宽度
  • 它可以容纳内联元素和其他块元素

以下实例都基于下面的html代码:

        <div class="out">
            <div class="in">
                居中元素
            </div>
        </div>

水平居中

定宽块级元素水平居中

  1. 父元素样式设置为display:flex; justify-content:center,则里面包含的块元素居中

           .out{
             display:flex;    
             justify-content:center;
         }  
    
  2. 该元素样式设置为 margin:0 auto;

           .in{
             width: 100px;  
             margin: 0 auto;
         }  
    
  3. 该元素样式设置为 position: relative;left: 50%;margin-left: -0.5*width(负的该元素宽度的一半)

           .in{
             width: 100px;
             position: relative;
             left: 50%;
             margin-left: -50px;
         }
    
  4. 上述方法把relative改为absolute也同样适用,根据实际情况选择适合自己的方法。

          .in{
             width: 100px;
             position: absolute;
             left: 50%;
             margin-left: -50px;
         }
    

不定宽块级元素水平居中

  1. 对于包含文字的块元素可将其父元素设置为text-align:center

         .out{
            text-align:center;    
         }
    
  2. 若不包含文字,可把该块级元素变成行内元素,即设置display:inine,再给其父元素设置text-align:center

         .out{
            text-align:center;    
         }
         .in{
            display:inine;    
         }
    
  3. 父元素样式设置为display:flex; justify-content:center,则里面包含的块元素居中

         .out{
            display:flex;    
            justify-content:center;
         }
    
  4. 该元素样式设置为 position: absolute;left: 50%;transform: translate(-50%,0)

         .in{
            position: absolute; 
            left: 50%;  
            transform: translate(-50%,0);
         }
    

垂直居中

定高块级元素垂直居中

  1. 父元素样式设置为display:flex; align-items: center,则里面包含的块元素居中

        .out{
            display:flex; 
            align-items: center;
        }
    
  2. 该元素样式设置为 position: relative;top: 50%;margin-top: -0.5*height(负的该元素高度的一半)

         .in{
            height:100px;
            position: relative; 
            top: 50%;  
            margin-top:-50px;
         }
    
  3. 该元素的父元素的position值设置为relative,将该元素样式设置为position: absolute;top:50%;margin-top: -0.5*height

         .out{
              position: relative;    
           }
         .in{
              height:100px;
              position: absolute; 
              top:50%;   
              margin-top: -50px
           }
    
  4. 该元素的父元素的position值设置为relative,将该元素样式设置为position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;

         .out{
             position: relative;    
          }
         .in{
             height:100px;
             position: absolute; 
             top:0;   
             bottom: 0;
             left: 0;
             right: 0;
             margin: auto;
          }
    

不定高块级元素垂直居中

  1. 父元素样式设置为display:flex; align-items: center,则里面包含的块元素居中

         .out{
             display:flex; 
             align-items: center;
         }
    
  2. 该元素样式设置为 position: relative;top: 50%;transform: translate(0,-50%)

         .in{
             position: relative;
             top: 50%;
             transform: translate(0,-50%);
         }
    
  3. 该元素的父元素的position值设置为relative,将该元素样式设置为position: absolute;top:50%;translate(0,-50%)

         .out{
              position: relative;
            }
         .in{
             position: absolute;
             top: 50%;
             transform: translate(0,-50%);
           }
    

小结

  • 总结到这里就会发现令元素居中的办法千奇百怪,其中无论水平还是垂直,无论有没有指定宽高,总能奏效的办法就是display:flex办法,这也是flex布局的优势之一,有时候使用flex布局甚至比bootstrap这种框架更加顺手,有机会我也会对flex做个总结。
  • 另外在上面的很多居中的办法中都用到了position: absolute,但是其实不建议经常使用绝对定位进行布局,因为它脱离了文档流,有时会造成元素的塌陷。因为关于position的不同取值带来的效果经常使人困扰,后面我也会对它进行总结。
  • 还有,居中的办法有这么多,但并不代表你需要懂得每一种,甚至去学会一些奇怪或者复杂的居中方式,而是在布局的过程中选择最适合、最简单、你用的最顺手的方法实现你想要的效果,俗话说黑猫白猫,能抓住耗子的就是好猫,居中方式也是一样的道理。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,152评论 3 30
  • display:设置元素的显示方式 display:block(块级元素) 默认为父元素宽高,可设置宽高相对前序换...
    bluishwhiteC阅读 657评论 0 0
  • 1.css设置透明度 filter:alpha(opacity=50); /*IE滤镜,透明度50%*/ -moz...
    _v_xw阅读 230评论 0 0
  • 果然又下雨了。 乌云乘了风,一会儿就把亮晃晃的天遮住了,仿佛一个巨大的筛子,风左摇右晃,雨点就不停歇地被筛落下来。...
    墨语浅黛王惜阅读 415评论 3 2