<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>居中大法</title>
<style>
.item {
200px;
height: 200px;
float: left;
margin: 20px;
position: relative;
border: 1px solid black;
}
.item div{
100px;
height: 100px;
background: red;
}
/*第一种
* good：兼容所有浏览器
* bad：必须知道元素具体宽高
*/
.div1{
position: relative;/*absolute也可*/
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/*第二种
* good：可以不知元素具体宽高，适合所有移动端
* bad：ie8以下不支持
*/
.div2{
position: absolute;/*fixed也可*/
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*第三种
* good：可以对不确定高度的元素垂直居中，适合所有移动端
* bad：ie9以下不支持 当前容器必须知道具体高度
*/
.div3{
200px;
height: 200px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.div3 img{
100px;
height: 100px;
}
/*第四种
* good：可以对不确定高度的元素垂直居中，适合所有移动端
* bad：ie9以下不支持 父元素加个display：table，实现类table
*/
.div4{
200px;
height: auto;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.item .inner-table{
100%;
height: 100%;
display: table;
}
.div4 img{
100px;
height: 100px;
}
/*第五种
* good：文本水平垂直居中
* bad：只适用单行文本
*/
.item .div5{
200px;
height: 200px;
line-height: 200px;
text-align: center;;
}
/*第六种
* good：可以对多个元素元素垂直居中，适合所有移动端，可以未知宽高
* bad：ie9以下不支持
*/
.div6{
200px;
height: 200px;
display: -webkit-box;/*弹性盒子模型*/
-webkit-box-pack: center;
-webkit-box-align: center;
}
.div6 img{
display: block;
100px;
height: 100px;
}
/*第七种
* good：适合所有移动端,适用未知高度
* bad：ie9以下不支持
*/
.div7{
position: relative;/*absolute也可*/
left: 50%;
top: 50%;
-webkit-transform:translate(-50%,-50%); /* Safari 和 Chrome */
-moz-transform:translate(-50%,-50%); /* Firefox */
-ms-transform:translate(-50%,-50%); /* IE 9 */
-o-transform:translate(-50%,-50%);
}
/*第八种
* good：适合所有浏览器,适用未知高度
* bad：null
*/
.item .div8{
100%;
height: 100%;
text-align: center;
}
.div8:before{
height: 100%;
display: inline-block;
vertical-align: middle;
background: blue;
content: '';
}
.center{
border: 1px solid blue;
display: inline-block;
vertical-align: middle;
line-height: 100px;
}
/*第九种
* good：可以对多个元素元素垂直居中，可以未知宽高
* bad：安卓的原生浏览器不支持，能够正常显示模块，文档流依次排列；UC浏览器不支持，显示为空白；微信浏览器不支持
*/
.item .div9{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
100%;
}
.div9 img{
display: block;
50px;
height: 60px;
}
</style>
</head>
<body>
<div class="item">
<div class="div1"></div>
</div>
<div class="item">
<div class="div2"></div>
</div>
<div class="item">
<a class="div3">
<img src="img/1.jpg" alt="img">
</a>
</div>
<div class="item">
<div class="div5">我要居中</div>
</div>
<div class="item">
<a class="div6">
我要居中<img src="img/1.jpg" alt="img">
</a>
</div>
<div class="item">
<div class="div7"></div>
</div>
<div class="item">
<div class="div8">
<div class="center">我要居中</div>
</div>
</div>
<div class="item">
<div class="div9">
<img src="img/1.jpg" alt="img">
<img src="img/1.jpg" alt="img">
</div>
</div>
</body>
</html>
各位前端伙伴肯定还有其他的水平垂直居中方式，欢迎回复讨论！！！