<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包练习</title>
<style>
.sup{
display: table;
width: 500px;
height: 200px;
background: blue;
}
.sub{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 50px;
background: red;
}
/*利用transform实现水平垂直居中*/
.sup1{
width: 500px;
height: 500px;
background: blue;
}
.sub1{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: green;
}
/*利用弹性盒子实现水平垂直居中*/
.sup2{
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background: red;
}
.sub2{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<!-- 利用display:table实现水平和垂直居中,这里要注意只能实现文字的水平和垂直居中 -->
<div class="sup">
<div class="sub">文字来一个</div>
<div class="sub">文字来一个文字来一个文字来一个</div>
</div>
<!-- 利用transform实现未知宽高的水平和垂直居中 -->
<div class="sup1">
<div class="sub1"></div>
</div>
<!-- 利用弹性盒子实现未知宽高的水平和垂直居中 -->
<div class="sup2">
<div class="sub2"></div>
</div>
</body>
</html>
未知宽高实现水平居中
最新推荐文章于 2023-03-21 11:02:24 发布