前端面试经典问题:CSS中居中的几种方式

作为面试常客,学会这些,面试多点把握,同学间逼格升高 周五,老大说他面试了一个问题,是css居中的问题,然后我们在这边就讨论了一番,周末嗨玩,尾巴上想起这件事,特来总结,希望能帮助到求职和学习的朋友! 参考了这篇文章,快速传送门内容都是我手敲实践过的可靠!

![](img1.jpg)这类的其实是img标签,这个markdown转换有问题,特来提醒

1.水平居中的 margin:0 auto;

关于这个,大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的,前提是不受float影响

<style>
    *{        padding: 0;        margin: 0;
    }        .box{            width: 300px;            height: 300px;            border: 3px solid red;            /*text-align: center;*/
        }        img{            display: block;            width: 100px;            height: 100px;            margin: 0 auto;
        }    </style><!--html--><body>
    <div class="box">
        ![](img1.jpg)    </div></body>

2.水平居中 text-align:center;

img的display:block;类似一样在不受float影响下进行 实在父元素上添加效果让它进行水平居中

<style>
    *{        padding: 0;        margin: 0;
    }        .box{            width: 300px;            height: 300px;            border: 3px solid red;            text-align: center;
        }        img{            display: block;            width: 100px;            height: 100px;            /*margin: 0 auto;*/
        }    </style><!--html--><body>
    <div class="box">
        ![](img1.jpg)    </div></body>

3.水平垂直居中(一)定位和需要定位的元素的margin减去宽高的一半 这种方法的局限性在于需要知道需要垂直居中的宽高才能实现,经常使用这种方法

    <style>
        *{            padding: 0;            margin: 0;
        }        .box{            width: 300px;            height: 300px;            background:#e9dfc7; 
            border:1px solid red;            position: relative;
        }        img{            width: 100px;            height: 150px;            position: absolute;            top: 50%;            left: 50%;            margin-top: -75px;            margin-left: -50px;
        }    </style><!--html --><body>
    <div class="box" >
        ![](2.jpg)    </div></body>

水平垂直居中1

4.水平垂直居中(二)定位和margin:auto; 这个方法也很实用,不用受到宽高的限制,也很好用

    <style>
        *{            padding: 0;            margin: 0;
        }        .box{            width: 300px;            height: 300px;            background:#e9dfc7; 
            border:1px solid red;            position: relative;

        }        img{            width: 100px;            height: 100px;            position: absolute;            top: 0;            left: 0;            right: 0;            bottom: 0;            margin: auto;
        }    </style><!--html --><body>
    <div class="box" >
        ![](3.jpg)    </div></body>

水平垂直居中2

5.水平垂直居中(三)绝对定位和transfrom 这个方法比较高级了,用到了形变,据我所知很多大神喜欢使用这个方法进行定位,逼格很高的,学会后面试一定要用!

<style>
    *{        padding: 0;        margin: 0;
    }    .box{        width: 300px;        height: 300px;        background:#e9dfc7; 
        border:1px solid red;        position: relative;

    }    img{        width: 100px;        height: 100px;        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%,-50%);
    }</style><!--html --><body>
    <div class="box" >
        ![](4.jpg)    </div></body>

水平垂直居中3

6.水平垂直居中(四)diplay:table-cell

其实这个就是把其变成表格样式,再利用表格的样式来进行居中,很方便

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        img{
            width: 100px;
            height: 150px;
            /*margin: 0 auto;*/  这个也行
        }</style><!--html --><body>
    <div class="box" >
        ![](5.jpg)    </div></body>

水平垂直居中4

7.水平垂直居中(五)flexBox居中

这个用了C3新特性flex,非常方便快捷,在移动端使用完美,pc端有兼容性问题,以后会成为主流的

<style>
    .box{            width: 300px;            height: 300px;            background:#e9dfc7; 
            border:1px solid red;            display: flex;            justify-content: center;            align-items:center;
        }        img{            width: 150px;            height: 100px;
        }</style><!--html --><body>
    <div class="box" >
        ![](6.jpg)    </div></body>

垂直居中5

8.水平垂直居中(六)利用vertical-align:middle; 这方法不常见,但是这位朋友@不二很纯洁 补充后我觉得也不失为一种好方法可以让别人刮目相看,这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样

<style>
    .wrap{            width:300px;            height:300px; 
            background:rgba(0,0,0,0.5);            text-align:center;            font-size:0;
            }    .vamb{        display:inline-block; 
        width:0px;        height:100%;        vertical-align:middle;
        }    .test{        display:inline-block;        vertical-align:middle;        font-size:16px;        text-align:left;        background:red;
        }</style><body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        宽高不定<br>
        垂直水平居中        </div>
    </div></body>

常见又实用的例子就先写到这,欢迎提意见,谢谢大家!喜欢请点个喜欢,转发一下,也是对我的支持和鼓励!


原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2017-02-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

4372
来自专栏我和我大前端的故事

我想推荐一本书 《CSS 世界》

前段时间张鑫旭老师的《css 世界》出版,之前看过他写的博客,写的挺好的,一直就在思考要不要买?

4601
来自专栏菜鸟前端工程师

html+css学习笔记012-表格

老板说:他们都没什么经验,做不出来的你就做出来给他们看看,让他们知道你的能力有多强大,他们就服你了

1323
来自专栏HTML5学堂

JS 吸顶导航,告别“回到顶部”

当我们浏览页面篇幅较大,浏览过半的时候想回到导航位置,只能通过往回滚动或通过”回到顶部”重新滚动到导航位置,这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互...

7096
来自专栏腾讯NEXT学位

你的网站可以一键变色吗?

45211
来自专栏HTML5学堂

各大公司移动端页面 - 导航的实现

HTML5学堂:伴随着科技的发展,出现了各种型号的手机,导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说,移动端的实现方法没有一个统一的标准,大家...

4617
来自专栏技术专栏

微信小程序- 移动设备的分辨率与rpx

2361
来自专栏河湾欢儿的专栏

响应式布局流式布局

响应式布局:根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口的宽度是980...

1152
来自专栏姬小光

像素眼是怎样炼成的

传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,小鸡君本人是个苦逼程序员,但小鸡君的像素眼也不比任何一个设计师差。

1014
来自专栏前端之路

–我对移动端适配的了解

2863

扫码关注云+社区

领取腾讯云代金券