绝对定位
<style>
.content{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
background: #123;
width: 100px;
height: 100px;
}
.father{
position: relative;
border:1px solid #543434;
height: 500px;
}
</style>
<body>
<div class="father">
<div class="content">
</div>
</div>
</body>
弹性盒子
<style>
.content{
background: #123456;
width: 100px;
height: 100px;
}
.father{
border:1px solid #543434;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<div class="father">
<div class="content">
</div>
</div>
</body>
table布局
<style>
.father{
border:1px solid #543434;
height: 500px;
width: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content{
background: #123456;
width: 100px;
height: 100px;
display: inline-block;
}
</style>
<body>
<div class="father">
<div class="content">
</div>
</div>
</body>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
