本知识学习用时:4小时,总第68/10000小时
前言:让“盒子”居中,在实际工作中可以说是随时都会用到。方法很多,我们在都理解的基础上用起来才能有的放矢、得心应手。
一、水平居中
① 在父元素上设置 text-align: center; 使文字/图片水平居中:
② margin
二、垂直居中
① 居中 vs 不居中
html
css
② 绝对定位实现居中
打开一个页面出现一个弹出框,那这个弹出框在页面垂直居中。这个弹出框可能下边还有东西,那这个弹出框很明显就是绝对定位了。因为,如果他不是绝对定位,他怎么去覆盖其他元素呢!
但由于用户的屏幕有大有小,那我都要让这个弹出框居中,怎样办?
html
css
③ vertical-align 实现居中
html
css
④ table-cell 实现居中
html
css
⑤ display: flex 实现居中
html
css
后记:下一篇我们讲“布局”,其实很多知识我们这连着的几篇文章都涉及到了,下一篇我们就做一个总结,看看我们实际工作中都有哪些常用的“布局”方式。加油!
欢迎继续关注下文 :
(15)把这些“可以动的盒子”更和谐优雅的展示——③ 实际工作中最常用的“布局”
(本文版权归 “公号 | Oli的前端一万小时” 所有,转载需说明来源)
领取专属 10元无门槛券
私享最新 技术干货