把这些“可以动的盒子”更和谐优雅的展示——②怎样更好的“居中”盒子

本知识学习用时: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的前端一万小时” 所有,转载需说明来源)

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180706G1PG4500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券