CSS 布局实例系列(一)总结CSS居中的多种方法
2024-10-19 17:17:58
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧。
1. 首先来聊聊水平居中:
text-align 与 inline-block 的配合
就像这样:
See the Pen mVpVEr by xal821792703 (@honoka) on CodePen.
HTML 中在想要居中的元素外面套了一个父元素,然后在 CSS 中将父元素的 text-align 属性设为 center,接下来将子元素的 display 属性设为 inline-block 就可以水平居中了。
通过 margin 实现
See the Pen rxpxmR by xal821792703 (@honoka) on CodePen.
通过 margin 实现连父元素都不用套了,直接 margin: 0 auto; 搞定,对,就是这么简单快捷,恐怕是居中最常用的方法了吧。
2. 结果老板表示只是水平居中不行,还得垂直居中:
还是上 margin 来实现一下绝对定位元素的水平垂直居中吧
See the Pen NxXxBz by xal821792703 (@honoka) on CodePen.
注意代码中的几个关键点:
- 子元素 div 绝对定位
- 父元素需要被定位
- 子元素 top、bottom、left、right 四个位置值均为 0
- 子元素 margin: auto;
来自 CSS3 的新杀器 flex
See the Pen xZpZMw by xal821792703 (@honoka) on CodePen.
使用 flex 容器布局实现水平垂直居中的关键点在于:
- 父元素 display 属性设为 flex
- 垂直布局的属性是 align-items,设为 center 时便垂直居中
- 水平布局的属性是 justify-content,设为 center 时水平居中
- 子元素弹性居中,增加子元素也不会有影响
另外请注意兼容性问题,见下图:
其实利用 CSS 实现居中还有许多方法我没有写在博文中,如何选择居中的技术方案,最后还是得取决于当前业务场景下的浏览器支持程度和适合度。
源代码已同步至个人 repo,欢迎参考交流(笑)
最新文章
- django admin后台提示没有static样式相关的文件
- .net开发笔记(十三) Winform常用开发模式第一篇
- api接口签名验证(MD5)
- ANSI
- 获取apk信息工具(android SDK的aapt工具)
- centos install shutter (How to enable Nux Dextop repository on CentOS or RHEL)
- windows 2003 搭建一个vpn
- 王立平--Unity综上所述控制
- TI公司与MSP430单片机
- 【c语言】实现一个函数,求字符串的长度,不同意创建第三方变量
- 腾讯工程师教你玩转 RocksDB
- 前端生成pdf
- Pivot For和UNPivot For
- 【转载】Linux 内存管理机制
- MySQL高可用方案MHA在线切换的步骤及原理
- array_values
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
- TPshop隐藏index.php
- python 抓取网上OJ试题
- arcengine自己做一个工具Tool放到工具箱中
热门文章
- 自己写的粗糙的Excel数据驱动Http接口测试框架(一)
- Bounded Context
- Input 银行卡验证
- Fiddler 过滤器的使用
- PHP设置会话(Session)超时过期时间实现登录时间限制
- fastjson List<;>; 转Json , Json 转List<;>;
- MySQL八:视图、触发器、事物、存储过程、函数
- SpringMvc 面向切面1
- [译]GLUT教程 - 修改菜单
- NHibernate 延迟加载与立即加载 (第七篇)