一、大家经常会遇到元素垂直居中问题，面试也是经常问的，所以现在总结几种常见的垂直居中的方法。
1、水平居中：
div{
width:200px;
margin:0 auto;
}
2、使用绝对定位的万能居中：
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink;
/* 方便看效果 */
}
3、水平垂直居中，通过定位与margin相结合：
确定容器的宽高 宽500 高 300 的层
设置层的外边距
div {
position: relative;
/* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
/* 外边距为自身宽高的一半 */
background-color: pink;
/* 方便看效果 */
}
4、通过css3的translate:
未知容器的宽高，利用 transform 属性
div {
position: absolute;
/* 相对定位或绝对定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
/* 方便看效果 */
}
5、使用flex布局实现居中：
利用 flex 布局
实际使用时应考虑兼容性
.container {
display: flex;
align-items: center;
/* 垂直居中 */
justify-content: center;
/* 水平居中 */
【css实现div的水平垂直居中方法】}
.container div {
width: 100px;
height: 100px;
background-color: pink;
/* 方便看效果 */
}
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）