img{ display: block; margin: 0 auto; }
这段代码的意思是将图片设置为块级元素,并且设置左右外边距为自动,这样就可以让图片水平居中。
但是它并没有设置垂直居中,所以我们需要再加上一些代码来实现垂直居中,如下所示:
.container{ height: 300px; /*容器高度*/ display: flex; /*容器设为flex布局*/ justify-content: center; /*设置主轴(水平方向)居中*/ align-items: center; /*设置侧轴(垂直方向)居中*/ } img{ display: block; margin: 0 auto; }
这里我们首先将图片的容器设为flex布局,然后分别设置主轴和侧轴居中即可实现垂直居中。
需要注意的是,这种方式需要在图片的容器中设置固定高度。否则无法对容器进行居中对齐操作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。