先看看等分的布局方案
1. float
兼容性较好（IE 8以上）
**2. flex **
兼容性较差（flex属于css3）
兼容性：IE8及以上
3. table
兼容性：可以兼容 IE 8
1. table
利用 table 的特性——每列等宽
2. flex
3. float
伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
label默认为内联元素，元素前后没有换行符，并且不可以设置宽度。
如果要为label设置宽度，则需要改变label的display属性，使其变为一个块级元素。
方法如下：
1.增加inline-block属性值，将label标签变为行内块元素（css2.1新增）
label{display:inline-block}2.增加width属性，如将宽度设置为100px
label{width:100pxdisplay:inline-block}3.添加好后页面上所有的label标签会变为100px
一、css图片水平居中。
1、利用margin: 0 auto实现图片居中，就是在图片上加上css样式margin: 0 auto 如下：
2、设置imgBox的样式如下：
3、此时的效果如下：（图片在容器内，水平居中）
二、css图片垂直居中。
1、css代码如下，使用flex布局实现。
2、页面代码HTML如下：
3、此时的效果如下：（垂直居中）
三、 css图片水平垂直居中。
1、利用flex布局实现css水平垂直居中，设计css代码如下：
2、Html代码如下：
3、此时的效果如下：（水平垂直居中）
扩展资料：
在容器上使用display: flex来告诉浏览器，这是一个flex布局的开始。然后给所有的item添加一个flex: 1的属性，来表明元素都是flex布局中的内容。
关于flex，最重要的就是要记住他有两条轴线（主轴、交叉轴），绝大部分属性都是依赖于轴线的方向。如下图所示：
这样，容器内的元素会沿着主轴来平分所有的区域，就这样已经实现了一个多列等宽布局。
