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

孤者浪人 提交于 2019-12-06 05:45:38

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

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

第二
使用table+margin
将子元素设置成块级表格显示类似(<table>),在设置子框居中以达到水平居中
兼容性:不支持  IE6、IE7

<div class="fa">
        父
    <div class="ch">子</div>
</div>

 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;    

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!