如何居中一个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{

        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左移之后，还会有个二分之一的宽度。