1. 水平垂直居中

利用margin负值可以实现元素的水平垂直居中

html代码：

    <div class="box">
        <div class="out">
            <div class="content">水平垂直居中</div>
        </div>    
    </div>

CSS代码

        .box {
            position: relative;
            width: 500px;
            height: 500px;
            background: #ddd;
        }
        .out {
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .content {
            width: 100px;
            height: 100px;
            margin: -50px 0 0 -50px;
            background: #aaccdd;
        }

实现效果

image.png

2. 列表项两端对齐

利用margin负值视觉上消除列表两端的溢出
overflow：hidden;=》清除浮动

html代码

    <div class="box">
        <div class="list"> 
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

CSS代码

        .box {
            float: left;
            width: 400px;
            height: 400px;
            background: #ffeecc;
        }
        .list {
            overflow: hidden;
            margin-right: -20px; 
        }
        .item {
            float: left;
            width: 120px;
            height: 400px;
            margin-right: 20px;
            background: #acacab;
        }

实现效果

image.png

3. 等高布局

通过给所有item栏目设置超高padding撑开，再用相同的margin值消除的原理，实现等高布局

html代码

    <div class="box">
        <div class="list">
            <div class="item">这边内容比较少，不会很高</div>
            <div class="item">这里的内容较少，高度不会被撑得很高。这里的内容较少，高度不会被撑得很高。</div>
            <div class="item">内容很多，撑开高度。内容很多，撑开高度。内容很多，撑开高度。内容很多，撑开高度。内容很多，撑开高度。</div>
        </div>
    </div>

CSS代码

        .box {
            width: 400px;
            /* height: 400px; */
            background: #ffeecc;
        }

        .list {
            overflow: hidden;
            margin-right: -20px;
        }

        .item {
            float: left;
            width: 120px;
            margin-right: 20px;
            background: #acacab;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }

实现效果

image.png

4. 三栏自适应布局

通过对三栏全部设置左浮动，使他们处于同一个文档流，再用margin负值调整位置。

HTML代码

    <div class="box">
        <div class="main">
            <div class="content">中间内容</div>
        </div>
        <div class="left">左侧内容</div>
        <div class="right">右侧内容</div>
    </div>
```css
#### CSS代码

    .main {
        float:left;
        width: 100%;
        height: 500px;   
    }
    .content {
        margin: 0 220px;
        height: 100%;
        background: #efacfb;
    }
    .left,.right {
        float: left;
        width: 200px;
        height: 500px;
        background: #abcdef;
    }
    .left {
        margin-left: -100%;
    }
    .right {
        margin-left: -200px;
    }

#### 实现效果

![image.png](https://img.haomeiwen.com/i7574134/e1b3adbb30fc3379.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)