作为一个前端开发者,使用 CSS 使元素居中,大家都写过,而且不止一次的那种,本文就通过一个案例,为大家介绍几个图片居中方案,看看你学废了吗?
通过CSS代码,将宝姐居中显示
html代码
<div class="container">
<img class="img" src="https://s1.ax1x.com/2022/07/28/v9ww4O.jpg" alt="">
</div>
css代码
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
}
.img {
width: 400px;
height: 400px;
border-radius: 50%;
}
原始效果
通过设置absolute
,然后将所有方向的距离设置为 0 ,利用margin: auto
来达到目的。它的兼容性好,不过需要知道子元素的宽高
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* add */
position: relative;
}
.img {
width: 400px;
height: 400px;
border-radius: 50%;
/* add */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
个人认为最常见的一个解决方案,无须知道子元素的宽高,无须对子元素进行操作
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* add */
display: flex;
align-items: center;
justify-content: center;
}
.img {
width: 400px;
height: 400px;
border-radius: 50%;
/* add */
}
类似flex ,无须知道子元素的宽高,需要同时对父子元素进行操作
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* add */
display: grid;
}
.img {
width: 400px;
height: 400px;
border-radius: 50%;
/* add */
align-self: center;
justify-self: center;
}
看起来不是很棒,和第1种方案有点差不多,也需要知道子元素的宽高,不过兼容性好
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* add */
position: relative;
}
.img {
width: 400px;
height: 400px;
border-radius: 50%;
/* add */
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
}
对上面的上面方案的升级,利用了css3的计算属性,依赖于calc的兼容性,也需要知道子元素的宽高
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* add */
position: relative;
}
.img {
width: 400px;
height: 400px;
border-radius: 50%;
/* add */
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 200px);
}
除了计算属性,我们还可以使用transform
来实现,这种方式就不用知道子元素的宽高,也比较方便!
.container {
width: 800px;
height: 600px;
border: solid 1px #e3c1a9;
border-radius: 30px;
/* add */
position: relative;
}
.img {
width: 400px;
height: 400px;
border-radius: 50%;
/* add */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
本文介绍到此结束,有人想通过display: table-cell
来进行实现,如下:
display: table-cell;
text-align: center;
vertical-align: middle;
以上方案留给各位大佬想办法,不过那个vertical-align
属性比较特别,期待你的表现
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。