关于CSS居中问题的一些总结

ISherry 发布于2019-08-01 18:44 / 965人阅读

摘要：兼容性属性兼容存在一定问题，高版本需要添加前缀父子第四使用通过父级元素布局将子框转换为再设置子元素水平居中兼容性不支持父子第五水平垂直将水平居中和垂直居中的相结合兼容性属性兼容性问题父子第六父相对子绝对，上下左右居中兼容性及以上父子

前端页面开发中关于内容居中的需求应用概率很大，自己搜集一些资料和总结关于css里的几种居中效果实现

第一
常用text-align:center
先将子元素将块级元素改为行内元素，即display:inline-block
父级元素设置text-align:center
兼容性：IE6 , IE7

第二
使用table+margin
将子元素设置成块级表格显示类似（

）,在设置子框居中以达到水平居中
兼容性：不支持 IE6、IE7


        父
    子


 display: table;
 margin: 0 auto;

第三
使用absolute+transform
将子元素设置为绝对定位，移动子框，使子元素左侧距离相对左侧边框的距离为相对子框宽度的一半，再通过向左移动子框一半宽度以达到水平居中。
兼容性：css3属性兼容存在一定问题，高版本需要添加前缀

position: relative; /*父*/
position: absolute; /*子*/
left: 50%;
transform:translateX(-50%);

第四
使用flex+margin
通过父级元素flex布局将子框转换为flex item再设置子元素水平居中
兼容性：不支持IE6、IE7、IE8

display: flex; /*父*/
margin: 0 auto; /*子*/

第五（水平垂直）
将水平居中absoulte+transform和垂直居中的absoulte+transform相结合
兼容性：css3属性兼容性问题

position: relative; /*父*/
position: absolute; /*子*/
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

第六
父相对子绝对，上下左右+margin居中
兼容性：IE8及以上

position: relative; /*父*/
----------------------------
position: absolute; /*子*/
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;

云服务器混合云 vps日常维护中的一些要点总结关于javascript的问题关于php的问题关于系统错误的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52073.html

关于CSS居中问题的一些总结

摘要：兼容性属性兼容存在一定问题，高版本需要添加前缀父子第四使用通过父级元素布局将子框转换为再设置子元素水平居中兼容性不支持父子第五水平垂直将水平居中和垂直居中的相结合兼容性属性兼容性问题父子第六父相对子绝对，上下左右居中兼容性及以上父子前端页面开发中关于内容居中的需求应用概率很大，自己搜集一些资料和总结关于css里的几种居中效果实现第一常用text-align:center先将子元素将...

Riddler 2019-08-30 14:14 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
2017年五月前端面试题目的总结

摘要：持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是大公司可能更偏向一些基础或者原理布局一些经典算法方面。现将我在面试过程遇到的问题总结下。目前先传题目答案整理好之后再发布出来。持续心累的找工作阶段算是结束了，不同公司对面试的知识侧重点不同，整体的感受就是：大公司可能更偏向一些JS基础或者原理、html布局、一些经典算法方面。小公司的面试更加侧重对经验和细节...

warkiz 2019-08-20 17:30 评论0 收藏0