用到的CSS布局整理

总结的是一些自己写代码时用到的布局CSS代码

让子div在父div里水平居中

.messageContainer {
        position: fixed;
        margin: 0 auto;
        width: 100%;
        top: 15px;
        display: flex;
        justify-content: center;
    }

※ justify-content:center; （水平居中对齐）
或者margin： 0 auto；（需要定宽度）

让一个div框针对某个模块上下左右都居中（水平垂直居中）

.container {  
        width: 90%;
        margin: 0 auto;
        padding: 15px;
    }
.text {  
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
    }

translate()函数是css3的新特性。可以在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用：top: 50%;left: 50%;， 是以自身的左上角为原点，故不处于中心位置。 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

#box{
                display: flex;
                display: -webkit-flex;
                border: 1px solid #0000FF;
                height: 200px;
                width: 400px;
                align-items:center;
                justify-content:center;
            }

※ justify-content:center; （水平居中对齐）
※ align-items:center;（垂直居中对齐）

 .mesContainer {
        width: 200px;
        height: 50px;
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

绝对定位的margin：auto。必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则

三栏布局

<div class="box">
  <div class="left">左 </div>
  <div class="right">右 </div>
  <div class="middle">中 </div>
</div>

.box>div{min-height: 100px;}
.left{width:100px;float:left;background-color:red;}
.right{width:100px;float:right;background-color:red;}
.middle{background:blue}

<div class="box">
  <div class="left">左 </div>
  <div class="middle">中 </div>
  <div class="right">右 </div>
</div>

.box>div{min-height: 100px;}
.box{display:flex;}
.left{width:100px;background-color:red;}
.right{width:100px;background-color:red;}
.middle{background:blue;flex:1}
//flex: 1; === flex: 1 1 auto; 

参考：
参考一
参考二