<h2>居中div</h2>
<div></div>
div{
border: 1px solid pink;
margin: 0 auto;
width: 80px;
height: 50px;
}
<h2>浮动元素的上下左右居中:</h2>
<div></div>
div{
border: 1px solid pink;
width: 50px;
height: 40px;
float: left;
position: absolute;
left: 50%;
top: 50%;
/* margin 的上外边距的值是height的一半 左外边距的值是width的一半 */
margin: -20px 0 0 -25px;
}
<h3>绝对定位的左右居中:</h3>
<div></div>
div{
border: 1px solid pink;
width: 200px;
height: 100px;
position: absolute;
/* 设置成绝对定位后,left和right的值最开始不是0,所以需要设置0之后,加上margin:0 auto;之后才居中 */
margin: 0 auto;
left: 0;
right: 0;
}