0
点赞
收藏
分享

微信扫一扫

单个div水平居中常用的方式

Yaphets_巍 2022-09-09 阅读 213

话不多说先上要实现的效果:(很简单水平居中)

单个div水平居中常用的方式_css

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素水平居中的方法</title>
</head>
<style type="text/css">
/* 方式一 margin 0 auto*/
.box{
width: 100px;
height: 100px;
color: #fff;
background: #000000;
margin: 0 auto;
}
</style>
<body>
<div class="box">方式一</div>
</body>
</html>

/* 方式二 */
.box{
width: 100px;
height: 100px;
color: #fff;
background: #000000;
margin-left: auto;
margin-right: auto;
}

/* 方式三 定位*/
.box{
width: 100px;
height: 100px;
color: #fff;
background: #000000;
position: absolute;
left: 50%;
margin-left: -50px;
}

 



举报

相关推荐

0 条评论