<div id="wrap">
<div class="msg">1111111111111111111111</div>
</div>
如何让类名为msg元素垂直水平居中呢？
第一种：定位 利用css3中transform：translate（）属性；Ie系列兼容10，11
#wrap{
400px;
height:400px;
border:1px solid #ccc;
margin:50px auto;
position:relative;
}
#wrap .msg{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
第二种：通过一起使用box-pack,box-align,对#wrap内的子元素垂直水平居中；Ie系列兼容11
#wrap{
400px;
height:400px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-ms-flexbox;
}
第三种：display:flex; Ie系列兼容11
#wrap{
400px;
height:400px;
border:5px solid #ccc;
margin:50px auto;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-align-items:center;
-webkit-justify-content:center;
align-items:center;
justify-content:center;
}
根据第一种方法写一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style:none;
}
body,html{
100%;
height:100%;
}
.fr{
float:right;
}
.fl{
float:left;
}
.clearfix:after{
clear:both;
display:block;
content:'';
}
.wrap{
100%;
height:100%;
}
.menu{
100px;
height:100%;
background:#ccc;
}
.menu h3{
line-height:50px;
text-align: center;
color:#fff;
}
.menu ul{
100%;
height:calc(100% - 50px)!important;
display:flex;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
flex-direction:column;
-webkit-flex-direction:column;
-moz-flex-direction:column;
-ms-flex-direction:column;
}
.menu ul li{
100%;
color:#fff;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-flex:1;
flex:1;
position:relative;
}
.menu li a{
display:block;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
.menu li a img{
display:block;
70%;
height:70%;
margin:2px auto;
}
.menu li a p{
height:30%;
line-height: 1.2;
text-align:center;
}
@media screen and (max-height:400px){
.menu li a img{
display: none;
}
.menu li a p{
font-weight:bold;
font-size:16px;
}
}
.content{
calc(100% - 100px);
}
</style>
</head>
<body>
<div class="clearfix wrap">
<div class="fl menu">
<h3>菜单啊</h3>
<ul>
<li>
<a >
<img src="iconfont.png">
<p>111</p>
</a>
</li>
<li>
<a>
<img src="iconfont.png">
<p>222</p>
</a>
</li>
<li>
<a>
<img src="iconfont.png">
<p>333</p>
</a>
</li>
<li>
<a>
<img src="iconfont.png">
<p>444</p>
</a>
</li>
</ul>
</div>
<div class="fl content"></div>
</div>
</body>
</html>
如图：
当屏幕高度低于400px时，图标消失
第二种方法做个例子：根据上个方法相应元素样式改为以下：
.menu ul li{
100%;
height:100%;
color:#fff;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-flex:1;
flex:1;
position:relative;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-ms-flexbox;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
}
.menu li a{
display:block;
}
第三种方法例子：根据第一个方法相应元素样式改为以下：
.menu ul li{
100%;
height:100%;
color:#fff;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-flex:1;
flex:1;
position:relative;
display:flex;
display:-webkit-flex;
display:-ms-flexbox;
justify-content:center;
align-items: center;
-webkit-justify-content:center;
-webkit-align-items:center;
}
.menu li a{
display:block;
}