【css】垂直居中的2种写法

转载 (原文地址) hedimo 随笔 转载 209阅读 2017-12-26 10:20:53 举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>

/ 垂直居中方法1:样式 /
.vam {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid #f00;
font-size: 0;
text-align: center;
}

.vam:before{
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}

.vam-body {
display: inline-block;
font-size: 16px;
vertical-align: middle;
}

/ 垂直居中方法2:样式 /
.vam2 {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid #00f;
font-size: 0;
text-align: center;
}

.vam2 .vam2-hack{
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}

.vam-body {
display: inline-block;
font-size: 16px;
vertical-align: middle;
}
</style>
</head>

<body>

<!-- 垂直居中方法1:代码 -->
<div class="vam">
<div class="vam-body">垂直居中</div>
</div>

<!-- 垂直居中方法2:代码 -->
<div class="vam2">
<span class="vam2-hack"></span>
<div class="vam-body">垂直居中</div>
</div>

</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复