水平居中的几种方法

最新推荐文章于 2024-10-30 17:51:39 发布

原创最新推荐文章于 2024-10-30 17:51:39 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

经验总结专栏收录该内容

17 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*方法一*/
/*.box{
width:300px;
height:300px;
border:1px solid #ff0;
position:relative;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
position:absolute;
left:0;
right:0;
top:0;
bottom: 0;
margin:auto;
}*/
/*方法二*/
/*.box{
width:300px;
height:300px;
border:1px solid #ff0;
position:relative;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
position:absolute;
left:50%;
margin-left:-50px;
top:50%;
margin-top: -50px;
}*/
/*方法三*/
/*.box{
width:300px;
height:300px;
border:1px solid #ff0;
position:relative;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}*/
/*方法四*/
.box{
width:300px;
height:300px;
border:1px solid #ff0;
display:flex;
justify-content: center;
align-items: center;
}
.box1{
width:100px;
height:100px;
background: deepskyblue;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>