html文字垂直居中的方法
2021-04-23 01:29
标签：cal white 技术 方法 inline rip item roc col 1.table-cell 2.margin-auto .box p{ margin: auto; } 3.display-flex 6.绝对定位0 html文字垂直居中的方法 标签：cal white 技术 方法 inline rip item roc col 原文地址：https://www.cnblogs.com/hapuluosi/p/14686139.htmlDOCTYPE html>
html>
head>
meta charset="utf-8">
title>title>
style>
.box{
width: 200px;
height: 200px;
background-color: red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p{
color: white;
}
style>
head>
body>
div class="box">
p>垂直居中p>
div>
body>
html>
.box2{ display: flex;
justify-content:center;
align-items:Center;
}.box{
text-align:center;
font-size:0;
}.box p{ vertical-align:middle;
display:inline-block;
font-size:16px;
}.box:after{ content:‘‘;
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}.box{
position:relative;
}
.box p{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}.box p{ width: 50%;
height: 50%;
background: red;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}