如何做出左右及左中右布局

布局图
常见的可以用内联元素<span>左</span><span>中</span> <span>右</span>
也可用也可把块元素转换为inline-block

<div style="display:inline-block">左</div>
<div style="display:inline-block">中</div>
<div style="display:inline-block">右</div>

如何做出水平居中布局

水平居中
水平居中最简单的方法margin: 0 auto;如果没有用可能是
1、元素没有设置宽度，没有宽度怎么居中无法居中
2、设置了宽度依然不好使，你设置的是行内元素吧。

可把父div改为text-align:center，子div改为display:inline-block
html部分代码为<div class=wrapper><div class=inner>1</div></div>
css代码为

.inner{
  border:1px solid red;
  display:inline-block; 
}
.wrapper{
  border:2px solid yellow;
  text-align:center;
}

如何做出垂直居中

垂直居中
其部分html代码为<div class="box box1"> <span>垂直居中</span> </div>

直接用display:table-cell;

.box1{
    display: table-cell;
    vertical-align: middle;
    height:200px;
    border:1px solid ;
    text-align: center;        
}

用position脱离文档流，即使用定位来垂直居中：父节点使用的是相对定位，子节点使用绝对定位，通过定位位置的设置，然后利用负边距来实现垂直居中。

.box1{position:relative;
      border:1px solid;
      height:200px;
}
.box1 div{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }