让div垂直水平居中的方法
关于如何让div垂直居中这个问题，是初级前端面试被问到的较为基础以及很常见的一道题目，下面我将总结一下让div垂直居中的击中方法。
1.图片展示
2. 首先它分为以下两种情况：
<body><div class="wrap"><div class="box">123div> div>
body>
知道宽高的情况下
1.margin：0 auto; (效果为水平居中)
{width: 100px;height: 100px;border: 1px solid #000000;margin:0 auto;
}
2.绝对定位，上左为50%，再让上左外边距为: -（实际宽高/2）
.box {width: 100px;height: 100px;border: 1px solid #000000;position: absolute;left: 50%;top: 50%;margin-top: -50px;margin-left: -50px;}
3.绝对定位，上下左右为0，margin为auto（记得后面这一句话很重要！）
.box {width: 100px;height: 100px;border: 1px solid #000000;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
4.弹性盒子
(这种方法在知不知道宽高都能够实现，只不过父元素不知道宽高的情况下它会是水平居中，但是需要注意的一个点是：把属性写在要求居中的div的父元素中)
.wrap{width: 500px;height: 500px;border: 1px solid #000000;position: relative;display: flex;justify-content: center;align-items: center;}.box{}
5.平移法
(这种方法在知不知道宽高都能够实现，在知道本身div的宽高下它会垂直水平居中，否则是水平居中)
.box {width: 100px;height: 100px;border: 1px solid #000000;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
6.利用css3新增属性
display: table; display: table-cell，vertical-aligen: middel
.wrap {height: 500px;border: 1px solid #000000;display: table;}
.box {border: 1px solid #000000;background: pink;display: table-cell;vertical-align: middle;}
不知道宽高的情况下
上面的4，5,，6方法都可以
目前见到的比较常用的就是这几种方法，还知道方法的童鞋可以在下面留言或者私聊我，哈哈哈欢迎一起讨论学习。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！