前端根据页面原型进行页面实现的时候，让div水平垂直居中的是很常见的问题，面试中也会经常被问到，下面和大家分享一下用CSS、Javascript、jQuery等方法让DIV水平和垂直居中。
一、CSS方法：
CSS实现div水平垂直居中的七种方法，分别是绝对定位与负margin值、display:inline-block、绝对定位与margin值auto、css transform与绝对定位方式、css Flex方法、inline-block+vertical-align+伪类方法、table-cell方法。
css实现div垂直居中对齐，还要考虑一个方面就是元素是否已知宽高。
元素宽高已知
1.绝对定位+负margin值（兼容全部浏览器）
1.父元素：position：relative;
2.子元素：position：absolute; 距上50％，距左50％，距上边和左边的高度为负高度的一半。
<style type="text/css">
.fatherBox{
width: 100%;
height:100%;
position: relative;
background:#ddd;
}
.childBox{
width: 200px;
height: 200px;
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /*--上边距等于负的高度的一半值--*/
margin-left: -100px; /*--左边距等于负的宽度的一半值--*/
}
</style>
<body>
<div class="fatherBox">
<div class="childBox"></div>
</div>
</body>
2.inline-block（兼容性较好,这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中，且元素宽高已知）
1.父元素：给它的父容器加一个text-align:center的样式，设置行高为父元素的高。
2.子元素（若干子元素）：display:inline-block；设置子元素为行内块元素,让他们都排成一行。
<style>
.fatherBox{
width: 500px;
height: 500px;
background-color: #FFAD41;
text-align: center;
line-height: 500px;
}
.childBox{
width: 100px;
height: 100px;
background-color: #F86F14;
display: inline-block;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox"></div>
<div class="childBox"></div>
<div class="childBox"></div>
</div>
</body>
元素宽高未知
1.绝对定位上下左右0+margin:auto
1.父元素：设置相对定位position: relative。
2.子元素：设置绝对定位position: absolute.上下左右的距离设置为0.margin设为auto.
<style>
.fatherBox {
width:100%;
height: 100%;
background: salmon;
position: relative;
}
.childBox{
width: 200px;
height: 200px;
border: 1px solid green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox"></div>
</div>
</body>
2.位置+变换
1.父元素：position：relative;
2.子元素：position：absolute; 距上50％，距左50％，元素相对自身的偏移度为负50％。
（兼容性不好，支持IE9 +的浏览器）
<style>
.fatherBox{
width:100%;
height: 100%;
background: salmon;
position: relative;
}
.childBox{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
<body>
<div class =“fatherBox”>
<div class =“childBox”> position + transform </ div>
</div>
</body>
3.flex布局
1.父元素：设置display: flex; justify-content: center;
align-items: center;
<style>
.fatherBox{
width: 500px;
height: 500px;
background-color: #FFAD41;
display: flex;
justify-content: center;
align-items: center;
}
.childBox{
background-color: #F86F14;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox">flex布局</div>
</div>
</body>
4.inline-block+vertical-align+伪类实现
<style>
.fatherBox{
width: 500px;
height: 500px;
vertical-align:center;
background-color: #FFAD41;
}
.fatherBox:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
.childBox{
display:inline-block;
vertical-align:middle;
width: 100px;
height: 100px;
background-color: #F86F14;
}
</style>
<body>
<div class="fatherBox">
<div class="childBox">inline-block+vertical-align+伪类实现</div>
</div>
</body>
5.table-cell
1.table-cell相当于表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;。不推荐使用。（ie8及以下不支持）
<style>
.fatherBox{
background-color: #FF8C00;
width: 100%;
height:100%;
display: table;
}
.childBox{
background-color: #DEB1F8;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.childTd {
background-color: #F5B9F0;
display: inline-block;
width: 20%;
height: 20%;
}
</style>
<body>
<div class="father fatherBox">
<div class="child childBox">
<div class="childTd"></div>
</div>
</div>
</body>
二、Javascript方法：
<script type="text/javascript">
//->获取当前屏幕的宽度和高度
var winW = document.documentElement.clientWidth || document.body.clientWidth,
winH = document.documentElement.clientHeight || document.body.clientHeight;
//->获取盒子的宽度和高度
var box = document.getElementById("box"),
boxW = box.offsetWidth,
boxH = box.offsetHeight;
box.style.position = "absolute";
box.style.left = (winW - boxW) / 2 + "px";
box.style.top = (winH - boxH) / 2 + "px";
</script>
三、jQuery实现水平和垂直居中
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
});
});
//初始化函数
$(window).resize();