CSS中的居中可以用于排版、布局等多种场景中,下面介绍几种实现居中的方式。
1. 水平居中
元素位置:relative; 左右margin:auto;
2. 垂直居中
元素位置:relative; 上下margin:auto; 高度height设为确定值;
3. 水平垂直居中
元素位置:relative; 上下左右margin:auto; 宽度、高度设为确定值;
4. 绝对定位水平垂直居中
元素位置:absolute; 宽度、高度设为确定值; 上下左右都为0; 左右margin:auto;
5. flex布局居中
容器设置为flex布局; justify-content:center、align-items:center;
6. grid布局居中
容器设置为grid布局; 设置grid-template-columns和grid-template-rows; 使元素显示在正中间。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。