div居中

1. 水平方向居中div

 <h2>居中div</h2>
 <div></div>

  div{
        border: 1px solid pink;
        margin: 0 auto;
        width: 80px;
        height: 50px;
    }

2. 浮动元素的上下左右居中

<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;
   }

3. 绝对定位的左右居中

<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;
    }