<body>
<div class="section text-h-center">
<p>水平置中</p>
</div>
<div class="section text-v-center">
<p>垂直置中</p>
</div>
<div class="section text-h-center text-v-center">
<p>水平垂直置中</p>
</div>
</body>
/* 文字水平置中 */
.text-h-center {
text-align: center;
}
/* 文字垂直置中 */
.text-v-center {
vertical-align: top;
}
.text-v-center:before {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.text-v-center p {
display: inline-block;
}
/* 好看用 */
body {
margin: 0;
padding: 10px;
}
.section {
display: inline-block;
height: 200px;
margin: 0;
width: 32%;
border: 1px solid #000;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.