利用CSS,如何把宝姐居中显示?
CSS 如何 利用 显示 居中
2023-06-13 09:14:29 时间
作为一个前端开发者,使用 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%;
}
原始效果
解决方法
1、absolute + margin auto
通过设置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;
}
2、flex(推荐)
个人认为最常见的一个解决方案,无须知道子元素的宽高,无须对子元素进行操作
.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 */
}
3、grid
类似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;
}
4、absolute + (-margin)
看起来不是很棒,和第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;
}
5、absolute + calc
对上面的上面方案的升级,利用了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);
}
6、absolute + transform
除了计算属性,我们还可以使用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
属性比较特别,期待你的表现
相关文章
- 如何制作网页-初学者入门HTML+CSS
- 在html中加入外部css样式,如何引入CSS样式表?
- 【说站】css自定义属性如何继承
- 【说站】css响应式布局如何理解
- 【说站】css旋转属性如何理解
- 【说站】css盒子模型的属性介绍
- 【说站】css中a标签伪类如何使用
- 【说站】css中Min()函数如何使用
- CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
- CSS媒体查询_css网页
- html css is图片,isbackground
- html怎么隐藏播放器_css遮罩
- 如何在canvas中模拟css的背景图片样式
- 【原创】CSS中常用伪元素
- 【CSS教程】简约渐变色登陆布局html+css代码
- CSS 如何设置背景透明,并使用 PHP 将十六进制的颜色值转换成 RGBA 格式
- CSS设计彻底研究详解编程语言
- css 字间距离_css 字体字符间距设置详解编程语言
- CSS如何影响MySQL的使用(css影响MySQL)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- div+css排版的样例
- 用CSS动态控制文本属性
- 教你如何用CSS来控制网页字体的显示样式
- CSS顶级技巧大放送,div+css布局必知
- Jquery+CSS创建流动导航菜单FluidNavigation
- juqery学习之六CSS--css、位置、宽高
- php压缩多个CSS为一个css的代码并缓存
- PHP小技巧之JS和CSS优化工具Minify的使用方法
- Asp.net程序优化js、css实现合并与压缩的方法