页面居中总结
来源:互联网 发布:跟兄弟连学php老版视频 编辑:程序博客网 时间:2024/06/03 17:24
有时候为了各种居中,因为要做到适配,如果页面宽度该变还想要居中,经过实践,现将总结的方案写下来。
水平居中
1.子盒子使用display:inline-block;
父盒子使用text-align:center
优点是兼容性比较好
2.子盒子使用display:table;margin:0 auto
3.父盒子使用position:relative
子盒子使用position:absolute;left:50%;translateX(-50%)
这种方法的优点是脱离的文档流对其他元素没有影响,缺点是css3支持才行。
4.父盒子:display:flex; justify-content:center;
或者父盒子:display:flex; 子盒子:margin: 0 auto;
垂直居中
1.父盒子:display:table-cell; vertical-align:middle;
2.父盒子:display:relative; 子盒子:display:absolute;top:50%;transform:translateY(-50%)
3.父盒子:display:flex;align-items:center
水平和垂直都居中
1.inline-block,text-align+table-cell,vertical-align是综合上面的水平居中和垂直居中
2.absolute+transform
3.flex,justify-content,aligin-items
从这些解决方案,我们可以得出要想解决一定得到布局问题,就必须对css的一些属性特别了解,然后还有会分解问题,将大的问题分解成一些小的问题,然后再解决,然后就是要勤加练习,遇到问题,解决问题,学习新技术,才可以发现新的解决方案。
- 页面居中总结
- css让页面居中对齐方法总结
- 页面居中、响应式布局的总结
- 页面居中
- CSS+div页面水平居中的布局方法总结
- 居中总结
- 设置页面居中
- CSS页面居中
- div层页面居中
- HTML页面居中
- 页面整体居中解决办法
- js弹出页面居中
- div页面居中
- 页面文本居中问题
- 页面内容居中
- div页面居中方法
- 页面布局-水平居中,垂直居中
- CSS在页面布局中实现div垂直居中的方法总结(转)
- Light OJ 1158 Anagram Division(状压+数位DP)
- 干货!谷歌推荐的技术能力提升指南
- GCD线程的应用
- mysql 插入效率问题
- 二级指针
- 页面居中总结
- 2016 MCM/ICM E 题渣渣论文
- 编程的一些思考
- 步进电机基础知识和基本应用
- 面试笔试杂项积累-leetcode 231-235
- django创建数据库的坑
- 02环信集成SDK基础功能 - 网络掉线自动重连
- 50个Java多线程面试题
- singleton中的陷阱