<style>
/* 方法一 * 通过定位来实现/
/* .content{
height: 300px;
background: #0f0;
position: relative;
}
.conDetail{
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} */
/* 方法二 * 通过弹性盒模型来实现 */
/* .content{
height: 300px;
background: #0f0;
display: flex;
align-items: center;
justify-content: center;
}
.conDetail{
background: red;
} */
/* 方法三 */
/* .content{
height: 300px;
background: #0f0;
width: 100%;
position: relative;
}
.conDetail{
background: red;
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
} */
</style>
<div class="content">
<div class="conDetail">
我是要实现居中对齐的内容
</div>
</div>
css中上下左右居中方法大全
最新推荐文章于 2024-08-24 21:17:20 发布