div居中布局

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

1.div水平居中

.box{
    margin: 0 auto;
}

2.div已知宽度水平垂直居中(position)

.box{
    position: relative;
}
.content{
    position: relative;
    top: 50%;
    margin-top: -10px;
}

3.div未知宽度水平垂直居中(transform)

.box{
    position: relative;
}
.content{
    position: relative;
    top: 50%;
    transform: translate(0, 50%);//x轴平移，y轴平移
}

4.flex布局

.box {
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}

div三栏布局

左栏、右栏定宽，中栏宽度不固定，三栏宽度加起来正好是100%。

绝对定位方法：用绝对定位固定在窗口两边，中间采用自适应宽度，利用margin属性把两边撑开。

.content{
    position: relative;
}
.left{
    position: absolute;
    left: 0;
}
.right{
    position: absolute;
    right: 0
}
.middle{
    margin: 0 100px;
}

浮动方法：此方法要让中间内容放在最后面，左列左浮动，右列右浮动，中间利用浮动的跟随性。

.left{
    float: left;
}
.right{
    float: right;
}
.middle{
    margin: 0 100px;
}

flex布局

.contain{
    display: flex
}
.left, .right, .middle{
    flex: 1
}

margin负值方法：此方法要让中间内容放在最前面，并且要使用一个容器把其包起来，设置width为100%，随屏幕自适应，然后让外层元素整体浮动，内层为真正的内容。左右两列均采用margin负值定位，左列左浮动，设置margin-left为-100%，右列也左浮动，然后设置margin-left为自身宽度的负值。三列相互关联，受到内部影响不大。

.middle{
    margin: 0 100px;
    float: left;
    width: 100%;
}
.middle-contain{
    //真正内容
}
.left{
    float: left;
    margin-left: -100%;
}
.right{
    float: left;
    margin-left: -100px;
}

居中布局、三栏布局

div居中布局

div三栏布局