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;}复制代码