如何垂直居中一个浮动元素
1、方法一：
.child{
width: 100px;
height: 100px;
background-color:darkcyan;
float: left;
position: absolute;
//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
2、方法二
.child{
width: 100px;
height: 100px;
background-color:darkcyan;
float: left;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
3、方法三：
.child {
width: 100px;
height: 100px;
background-color: darkcyan;
float: left;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
如何垂直居中一个
img ？
1、方法一
//![]()
的容器
.img-container{
display: table-cell;
vertical-align: middle;
text-align: center;
}
2、方法二
.img-container{
display: flex;
justify-content: center;
align-items: center;
}
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）