css居中办法学习笔记

第一种：经过margin负值

<div class="one"></div>

.one{
    position: absolute;
    width: 200px;
    height: 200px;
    top:  50%;
    left: 50%;
    margin-left: -100px;
    margin-right: -100px;
    background: green;
}

优势：
基本浏览器都能兼容

缺点：
必需要固定宽高

第二种：经过margin:auto

<div class="two"></div>

.two{
    position: absolute;
    width: 100px;
    height:100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

以上两种方法均可以把absolute换成fixed,注意，fixed在ie下不支持

第三种：table-cell

<div class="inner">
    <div class="foo"></div>
</div>

.inner{
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.foo{
    display: inline-block;
    width: 50%;
    height: 50%;
}

设置了table-cell以后，父元素就变成了一个单元格
关于使用table-cee布局

第四种：行内元素居中

<div class="four">
    内容居中
</div>

.four{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

这种方法只能居中行内元素。经常使用于文字对其居中

第五种：transform居中

<div class="five"></div>

.five{
    position: absolute;
    top: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

好处就是不可不用定义宽高，可是对于不兼容css3的浏览器没有做用

第六种：伪类居中

<div class="six">
    <div class="content"></div>
</div>

.six{
    position:aabsolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    }
.six:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    }
.six .content{
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 40px;
    }

第八种：flex布局

<div class="eight">
    <div class="content"></div>
</div>

.eight{
    display: flex;
    align-items: center;
    justify-content: center;
}

一样，会存在浏览器兼容问题