css垂直居中：5种⽅法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
/*⽅法四*/
/* This parent can be any width and height */
.block {
height: 300px;
text-align: center;
background: #FFE1CC;
border: 2px solid #91C001;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
height: 100%;
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can also be of any width and height */
.centered {
width: 50%;
display: inline-block;
vertical-align: middle;
background: #A3E6F1;
}
</style>
<body>
<!--
垂直居中：⽅法⼀
使⽤：display：table；vertical-align：middle；
-->
<div >
<div >项⽬质监机构</div>
<div >
<a ></a>
</div>
</div>
<!--
垂直居中：⽅法⼆
使⽤：position：absolute；写法⼀
-->
<div >
<div ></div>
</div>
<!--
垂直居中：⽅法⼆
使⽤：position：absolute；写法⼆
-->
<div >
<div ></div>
</div>
<!--
垂直居中：⽅法三
使⽤：display：flex；
justify-content: center;⽔平居中
align-items: center; 垂直居中
IE9，IE8下不⽀持；
-->
<div >
<div ></div>
</div>
<!--
垂直居中：⽅法四
使⽤：display：inline-block；
-->
<div class="block">
<div class="centered">
<h1>haorooms案例题⽬</h1>
<p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
</div>
</div>
</body>
</html>
发表评论