常见的水平垂直居中实现方案,可以介绍三种方案。
最简单的方案当然是flex布局:
.father { display: flex; justify-content: center; align-items: center; } .son { ... }
绝对定位配合margin:auto,的实现方案:
.father { position: relative; } .son { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
绝对定位配合transform实现:
.father { position: relative; } .son { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
网友评论文明上网理性发言 已有0人参与
发表评论: