CSS中的背景图居中一直是前端开发者经常遇到的问题。通过以下几种方法,你可以很容易地让你的背景图片居中。1、使用background-position属性:body { background: url
CSS中的背景图居中一直是前端开发者经常遇到的问题。通过以下几种方法,你可以很容易地让你的背景图片居中。
1、使用background-position属性:
body { background: url(your-image.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
2、使用text-center属性:
body { background-image: url(your-image.jpg); background-size: cover; background-repeat: no-repeat; text-align: center; } body:before { content: '; display: inline-block; vertical-align: middle; height: 100%; } div { display: inline-block; vertical-align: middle; }
3、使用flexbox技术:
body { display: flex; min-height: 100vh; flex-direction: column; justify-content: center; align-items: center; background-image: url(your-image.jpg); background-size: cover; }
这些方法都是比较经典的CSS使背景图居中的方式,具体应用根据个人情况可以选择合适的方法,达到最佳效果。
粉丝
0
关注
0
收藏
0