如何居中一個div？如何居中一個浮動元素？

第一種方法：

①，居中一個div：

給div設置一個寬度，margin:0px auto。

position:absolute top:50%,left:50% transform:translate(-50%，-50%)

彈性盒居中 justify-content:center align-items:center

 

②，居中一個浮動元素：

居中一個浮動元素（套一個大盒子給它margin:0px auto。）

設置當前div的寬度，然后設置margin-left:50%; position:relative; left:-250px;其中的left是 寬度的一半。

 

二，第二種方法：

①，div為塊級元素，居中塊級元素首先要設置寬度，然后margin:0 auto;就居中了。

 <style>

    .a{

        width:100px;

        margin:0 auto;

        background:red;

    }

</style>

    <div class="a">123</div>

②，居中浮動元素就麻煩一點了。

<style>

.box{

position: relative;

left:50%;

float:left;

}

.item{

position: relative;

left:-50%;

float:left;

background: red;

}

</style>

<div class="box">

<div class="item">123</div>

</div>

注：left:50%;這個left按照百分比來設置left值實際移動是按父容器的寬度來算，

    可以先看成box容器為body寬度為也就是瀏覽器寬度，left:50%;就是向右移動到中間，

    現在還要向左移動浮動元素item一半的距離，box的float是為了讓box自身收縮，這樣item的父容器的寬度就是本身的寬度了，再設置為left:-50%;也就是向左移動自身寬度的一半。

編輯於 2017-05-03 14:52:50回復(1)舉報

第一種，position:relative很重要。

如果父元素相對定位，子元素絕對定位，此時依舊是margin-left: 50%, left: -5px;

第二種方法感覺並不是太好。因為left左移之后，還會有個二分之一的寬度。