<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.p_box{
border: solid blue 1px;
300px;
height: 300px;
}
.box{
20%;
height: 20%;
border: solid red 1px;
}
/*方案1-未知宽高的容器设置居中*/
.p_measure1{
position: relative;
}
.measure1{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/*方案2-未知宽高的容器设置居中*/
.p_measure2{
position: relative;
}
.measure2{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*方案3-未知行数的文本设置居中*/
.p_measure3{
display: table;
}
.measure3{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="p_box p_measure1">
<div class="box measure1"></div>
</div>
<div class="p_box p_measure2">
<div class="box measure2"></div>
</div>
<div class="p_box p_measure3">
<div class="box measure3">
这是一个未知行数的文本<br>
ddd
</div>
</div>
</body>
</html>