块状元素水平垂直居中的五种方法 :
<style type="text/css">
*{
margin: 0; padding: 0;
}
div{
width: 500px;
height: 500px;
background: #f00;
}
p{
width: 100px;
height: 200px;
background: #ff0;
}
/*第一种(固定或不固定都能用)*/
/*div{
position: relative;
}
p{
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
margin: auto;
}*/
/*第二种*/
/*div{
position: relative;
}
p{
position: absolute;
top:50%;left: 50%;
margin-top: -100px; margin-left: -50px;
}*/
/*第三种 (固定或不固定都能用)*/
/*div{
position: relative;
}
p{
position: absolute;
top:50%;left: 50%;
transform: translate(-50%,-50%);
}*/
/*第四种 (固定或不固定都能用)*/
/*div{text-align: center;}
p{
display: inline-block;
vertical-align: middle;
}
span{
display: inline-block;
height: 100%;
vertical-align: middle;
}*/
/*第五种(固定或不固定都能用)*/
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div>
<!--<p></p><span></span>-->
<img src="img/icon.png"/>
</div>
</body>
821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
