div的居中方式

關於div的居中方式有很多種，接下來看一看我所總結的吧，最終列子會放到最下面。

為了方便觀看，我把例子中的父級的高度設定了100%

唔~開整

1.利用margin與定位

/*父級*/
position:relative;
/*子級*/
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;

詳解：

設定margin自動適應,然後設定定位的上下左右都為0,就如四邊均衡受力從而實現盒子的居中；

2.利用table-cell

/*父級*/
display:table-cell;
text-align:center;
vertical-align: middle;
/*子級*/
display:inline-block

詳解：

將父盒子設定為table-cell(能夠使元素呈單元格的樣式顯示)，並設定text-align: center(使內容水平居中)；vertical-align:middle(使內容垂直居中);。子盒子設定為inline-block可以使其內容變為文字格式，也可設定寬高；此方法父級需設定指定高度和寬度，負責無效

3.利用flex彈性盒子

display: flex;
justify-content: center;
align-items: center;

詳解：

使用彈性盒子的時候需要給父級設定display:flex;

在父元素上設定水平justify-content:center;與垂直align-items:center;方向上的排列方式即可

4.利用定位+位移

/*父級*/
position:ablative;
/*子級*/
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)

詳解：

利用定位將子級進行向右下方向進行"驅逐"，使子級的左上角那一點相對於父級居中，然後使用transform(相對於自身的位移)進行反向位移

5.利用定位+margin

/*父級*/
position:ralatiive;
/*子級*/
height:50px;
width:50px;
position：absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;

詳解：

利用定位將盒子擠向右下方，再利用margin進行反向回推。

(原理和定位+位移的方法如同一轍)

例子：

number one

.login{
    position: relative;
    background:#2b4b6b;
    height: 100%;
    >div{
        width: 450px;
        height: 300px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

number tow

.login{
    width: 500px;
    height: 500px;
    display:table-cell;
    text-align:center;
    vertical-align: middle;
    background:#2b4b6b;
    >div{
        width: 300px;
        height: 300px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px #ddd;
        display: inline-block;
    }
}

number three

.login{
    height: 100%;
    background: #2b4b6b;
    display: flex;
    justify-content: center;
    align-items: center;
    >div{
        width: 300px;
        height: 300px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px #ddd;
    }
}

number four

.login{
    height: 100%;
    background: #2b4b6b;
    position: relative;;
    >div{
        width: 450px;
        height: 300px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%)
    }
}

number five

.login{
    height: 100%;
    background: #2b4b6b;
    position: relative;;
    >div{
        width: 300px;
        height: 300px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top:-150px;
        margin-left:-150px;
    }
}