话不多说先上要实现的效果:(很简单水平居中)
<!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;
}