文章图片
实现代码:
垂直居中 - 锐客网
/* 方法 1子元素 position:absolute 0 0 0 0*/
#container1{
width: 400px;
height: 400px;
position: relative;
background-color: #f5f5f5;
}
#item1{
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #03c03c;
}/* 方法 2子元素 position:absolute*/
#container2{
margin-top: 20px;
width: 400px;
height: 400px;
position: relative;
background-color: #f5f5f5;
}
#item2{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
background-color: #03c03c;
}/* 方法 3 子元素 position:relative*/
#container3{
position: relative;
margin-top: 20px;
width: 400px;
height: 400px;
background-color: #f5f5f5;
}
#item3{
width: 200px;
height: 200px;
position: relative;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
background-color: #03c03c;
}/* 方法 4 line-height*/
#container4{
width: 400px;
height: 400px;
line-height: 100px;
background-color: #f5f5f5;
margin-top: 20px;
}
#item4{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #03c03c;
}/* 方法 5display:flex*/
#container5{
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
margin-top: 20px;
}
#item5{
width: 200px;
height: 200px;
background-color: #03c03c;
}/* 方法 6display:box;
*/
#container6{
height: 400px;
width: 400px;
margin-top: 20px;
background-color: #f5f5f5;
display: -webkit-box;
display: box;
-webkit-box-align: center;
-webkit-box-pack: center;
box-align: center;
box-pack: center;
}
#item6{
height: 200px;
width: 200px;
background-color: #03c03c;
}
CONTAINER1
ITEM1CONTAINER2
ITEM2CONTAINER3
ITEM3CONTAINER4
ITEM4 【【前端】几种实现水平垂直居中的方法总结】
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例