前端面试经典问题:CSS中居中的几种方式
2017-02-25 14:32
696 查看
转载自:http://www.jianshu.com/p/a7552ce07c88
为面试常客,学会这些,面试多点把握,同学间逼格升高
周五,老大说他面试了一个问题,是css居中的问题,然后我们在这边就讨论了一番,周末嗨玩,尾巴上想起这件事,特来总结,希望能帮助到求职和学习的朋友!
参考了这篇文章,快速传送门内容都是我手敲实践过的可靠!
1.水平居中的 margin:0 auto;
关于这个,大家也不陌生做网页让其居中用的比较多,
这个是用于子元素上的,前提是不受float影响
2.水平居中 text-align:center;
img的display:inline-block;类似一样在不受float影响下进行
实在父元素上添加效果让它进行水平居中
3.水平垂直居中(一)定位和需要定位的元素的margin减去宽高的一半
这种方法的局限性在于需要知道需要垂直居中的宽高才能实现,经常使用这种方法
水平垂直居中1
4.水平垂直居中(二)定位和margin:auto;
这个方法也很实用,不用受到宽高的限制,也很好用
水平垂直居中2
5.水平垂直居中(三)绝对定位和transfrom
这个方法比较高级了,用到了形变,据我所知很多大神喜欢使用这个方法进行定位,逼格很高的,学会后面试一定要用!这个是不需要知道居中元素的宽高就可以使用的,代码里的图片稍微有点大,改改宽高,仅此而已,在面试中大部分人会问如果不知道宽高该如何居中,答这个,加分!对transform不了解的同学可以查阅一下资料了解一下!
水平垂直居中3
6.水平垂直居中(四)diplay:table-cell
其实这个就是把其变成表格样式,再利用表格的样式来进行居中,很方便
水平垂直居中4
7.水平垂直居中(五)flexBox居中
这个用了C3新特性flex,非常方便快捷,在移动端使用完美,pc端有兼容性问题,以后会成为主流的
垂直居中5
8.水平垂直居中(六)利用vertical-align:middle;
这方法不常见,但是这位朋友@不二很纯洁 补充后我觉得也不失为一种好方法可以让别人刮目相看,这个方法关键要有一个和容器一样高的元素作为居中的一个参照就像b元素一样
常见又实用的例子就先写到这,欢迎提意见,谢谢大家!喜欢请点个喜欢,也是对我的支持和鼓励!
学习前端的过程中,我整理了很多资料,也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量,入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人,每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加笑笑微信:iamaixiaoxiao,拉你入群。再次强调,保证群高质量,群非前端不加,请谅解哦。扫描微信二维码也可以。
为面试常客,学会这些,面试多点把握,同学间逼格升高
周五,老大说他面试了一个问题,是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:inline-block;类似一样在不受float影响下进行
实在父元素上添加效果让它进行水平居中
<style> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border: 3px solid red; text-align: center; } img{ display: inline-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
这个方法比较高级了,用到了形变,据我所知很多大神喜欢使用这个方法进行定位,逼格很高的,学会后面试一定要用!这个是不需要知道居中元素的宽高就可以使用的,代码里的图片稍微有点大,改改宽高,仅此而已,在面试中大部分人会问如果不知道宽高该如何居中,答这个,加分!对transform不了解的同学可以查阅一下资料了解一下!
<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>
常见又实用的例子就先写到这,欢迎提意见,谢谢大家!喜欢请点个喜欢,也是对我的支持和鼓励!
学习前端的过程中,我整理了很多资料,也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量,入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人,每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加笑笑微信:iamaixiaoxiao,拉你入群。再次强调,保证群高质量,群非前端不加,请谅解哦。扫描微信二维码也可以。
相关文章推荐
- 前端面试经典问题——css居中的几种方式
- 最近一个刚刚毕业的朋友说,他面试时候,遇到最频繁的css问题就是垂直居中,这里给出几种垂直居中方式!
- 【前端】使用CSS使元素居中的几种方式
- 关于前端面试中的一些常见问题-CSS(欢迎补充)
- css垂直居中的几种方式
- CSS中的几种居中方式整理
- 用纯css使div水平居中的几种方式
- 5个经典的前端面试问题
- web前端细节性问题(面试时可能遇到的问题)——div+css(1)
- css 水平垂直居中的几种常见方式
- web前端细节性问题(面试时可能遇到的问题)——div+css(2)
- 前端面试最为经典的问题:输入URL到页面加载完成都发生了什么
- css考核点整理(六)-水平居中定位的几种方式
- css垂直居中的几种方式
- CSS几种居中方式
- 5个经典的前端面试问题,你行吗?
- 面试常见问题——垂直居中的几种方法
- 5个经典的前端面试问题
- 不得不了解的前端问题02(面试大典)--匿名函数、html/css注意事项、css兼容
- 前端面试经典题目合集(HTML+CSS)(一)