2019-05-26 关于元素的居中问题

1.使用text-align:center
只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。
2.使用display:table-cell来居中
这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效

.div1  {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width: 200px;
    height:200px;
    border:1px solid red;
}
.div2 {
    width: 100px;
    height:100px;
    border: 1px solid rgba(0,0,0,0.3);
    background: #ffffff;
    display:inline-block;
}

3.使用绝对定位来进行居中
如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。

.div1  {
    width: 200px;
    height:200px;
    border:1px solid red;
    position:relative;
}
.div2 {
    width: 100px;
    height:100px;
    border: 1px solid rgba(0,0,0,0.3);
    background: #ffffff;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-50px;
}

4.另一种使用绝对定位来居中的方法
只适用于那些我们已经知道它们的宽度或高度的元素,只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。

.div1  {
    width: 200px;
    height:200px;
    border:1px solid red;
    position:relative;
}
.div2 {
    width: 100px;
    height:100px;
    border: 1px solid rgba(0,0,0,0.3);
    background: #ffffff;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

5.利用transform: translateX(-50%); transform: translateY(-50%); 和margin来居中
适用于固定宽高

  .div1{
        width: 300px;
        height:300px;background:firebrick;
        overflow: hidden;  
    }
    .div2{
        width: 20px;
        height: 20px;
        transform: translateX(-50%);
        transform: translateY(-50%);
        margin-left:50%;
        margin-top:50%;
        background-color: forestgreen
    }