css布局和居中简析1.给需要左右排版的元素设置float属性，然后给父元素清除浮动。清除浮动的常用方法有两种：a.给子

左右布局

常用的左右布局方式：
1.给需要左右排版的元素设置float属性，然后给父元素清除浮动。清除浮动的常用方法有两种：a.给子元素加一个空的div兄弟标签，设置clear:both样式；b.给父元素设置伪类，具体写法为父元素::after{display:block;content:"";clear:both;}。这两种本质其实都是利用clear:both来清除浮动，不过b可以减少使用无意义标签，使页面看起来更美观，也有其他的清除浮动方式，但是没怎么用过，不做评价。

2.给需要左右排版的元素都设置display:inline-block;让他们可以在同一行排列。但是同时又会带来两个问题，一个是元素之间会有空白，浏览器会把代码中内联元素中间的换行符解析成一个空格，这个我们可以在代码中删除代码中间的换行，但是个人感觉有点费劲，也可以给父元素设置font-size:0;来消除多余的空格，这个可以解决大部分标签的空格问题；第二个问题是设置了display:inline-block;后会影响元素内部的内容的基线对齐，就是左右两个元素中的内容本来应该同一行显示的，显示成了一上一下错位的，这时候需要用vertical-align来拉回基线，通过改变vertical-align的值改变内容的对齐方式，想要知道vertical-align这个属性是怎么作用的，应该看看下面两张图：

3.flex布局。给父元素设置display:flex;表示使用flex布局，然后设置flex-direction设置子元素排列方向，左右或上下都可，具体属性用法参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

4.绝对定位。直接给子元素设置position:absolute,然后分别设置对应的top,right,left,bottom值即可

左中右布局（左右固定，中间栏自适应）

1.浮动。左栏左浮动，右栏右浮动，左右定宽，中间栏给左右margin值实现自适应，注意顺序，中间栏需要放在左右栏后面：

<style>
html,body{margin:0;height:100%}
.middle{margin:0 210px;height:100%;}
.left{float:left;width:200px;height:100%;}
.right{float:right;width:200px;height:100%;}
</style>

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

2.margin负值法。本质还是使用了浮动的方法，给中间栏加一个子元素作为主体内容，然后利用margin负值让本来已经另起一行的左右两栏再回到和中间栏并列，左栏margin负值为100%，即中间栏的宽度，右栏maigin值是自身的宽度的负值。

<style>
html,body{margin:0;height:100%}
.middle{width:100%;height:100%;float:left;}
.middle .content{margin:0 210px;height:100%;}
.left{float:left;width:200px;height:100%;margin-left:-100%;}
.right{float:right;width:200px;height:100%;margin-right:-200px;}
</style>

<div class="middle"><div class="content"></div></div>
<div class="left"></div>
<div class="right"></div>

3.flex布局，感觉跟左右布局差不多，根据属性设置每一栏的宽度百分比就行。

4.绝对定位。左右栏才用绝对定位，分别固定在两侧，中间栏用margin撑开两边距离。

水平垂直居中

使用绝对定位：

ONE:父盒子相对定位，子盒子绝对定位后，top，left设置50%,然后给定margin-top值为子盒子高度值一半的负值，margin-left值为子盒子宽度值一半的负值。如果高度不确定或者宽度不确定可以设置transform:translateX(-50%) translateY(-50%) 可以达到相同效果。

<div><img src="" /></div>

.box{width: 300px;height: 250px;background: #fff;position:relative;}img{width: 100px;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin-left:-50px;margin-top:-33px;}

TWO:父盒子相对定位，子盒子绝对定位后，top,right,bottom,left都设置为0，设置margin:auto可同时水平垂直居中。只垂直居中，left,right不为0,；只水平居中，top,bottom不为0。

<div><img src="" /></div>

.box{width: 300px;height: 250px;background: #fff;position:relative;}img{width: 100px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
}

用display:table实现居中

不用设置定位，给img标签包裹一个div,给父盒子设置display:table,给图片外层的div设置display:table-cell和vertical-align:middle即可让图片垂直居中，水平居中给父盒子设置text-align:center。

<div class="box">   <div class="img">
      <img src="" />
    </div>
</div>

.box{width: 300px;height: 250px;background: #fff;display:table;text-align:center;}#img{display:table-cell;vertical-align:middle;}img{width: 100px;}

用flex实现居中

给父盒子设置display:flex,设置align-items:center使子元素垂直居中，justify-content:center使子元素水平居中。

<div class="box"><img src="" /></div>

.box{
width: 300px;height: 250px;background: #fff;display:flex;align-items:center;justify-content:center;}img{width: 100px;}