CSS居中布局总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS居中布局总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1973字，纯文字阅读大概需要3分钟。

内容图文

<div class=”parent”>

<div class=”child”>demo</div>

</div>

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;}

思路：了解属性值特性，分解问题。

内容总结

以上是互联网集市为您收集整理的CSS居中布局总结全部内容，希望文章能够帮你解决CSS居中布局总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端