登录  /  注册
首页 > web前端 > css教程 > 正文

CSS居中布局总结

高洛峰
发布: 2016-11-23 15:15:42
原创
1234人浏览过

居中布局

 

demo

1.水平居中

    1>     方案一 inlink-block+text-align

             .child {display:inlink-block;}

             .parent {text-align:center;}

             优点:兼容性好

             缺点:子元素宽高不可设置

    2>     方案二 table+margin

             .child {display:table; margin:0 auto;}

             优点:只需要设置child(自己)

    3>     方案三 absolute+transform

             .parent {position:relative;}

             .child {position:absolute;left:50%;transform:translateX(-50%);}

             优点:子元素不会对其他元素产生影响

             缺点:兼容性问题

    4>     方案四 flex+justify-content

             .parent {display:flex;justify-content:center;}

             优点:只需设置parent节点

             或者设置为

             .parent {display:flex;}

             .child {margin:0 auto;}

             缺点:flex低版本ie不支持

 

2.垂直居中

    1>     方案一 table-cell+vertical-align

             .parent {display:table-cell;vertical-align:middle;}

             优点:只需设置父节点,兼容性好

    2>     方案二 absolute+transform

             .parent {position:relative;}

             .child {position:absolute;top:50%;transform:translateY(-50%);}

             优点:子元素不会对其他元素产生影响

             缺点:兼容性问题

    3>     方案三 flex+align-items

             .parent {display:flex;align-items:center;}

             优点:只需设置父节点

             缺点:兼容性问题

 

3.水平和垂直均居中

     1>     方案一 inline-block+text-align+table-cell+vertical-align

              .parent {text-align:center;display:table-cell;vertical-align:middle;}

              .child {display:inline-block;}

     2>     方案二 absolute+transform

              .parent {position:relative;}

              .child { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

     3>     方案三 flex+justify-content+align-items

              .parent {display:flex;justify-content:center;align-items:center;}

 

 

思路:了解属性值特性,分解问题。

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号