css各种布局

水平居中

• margin+定宽

.child{
     width:100px;
     margin:0 auto;
}

• table+margin

.child{
      display:table;
      margin:0 auto;
}

• inline-block+text-align

.child{
   display:inline-block;
}
.parent{
	 text-align:center;
}

• flex(设置父元素)

.parent{
        display:flex;
        justify-content:center;
}

垂直居中

• table-cell+vertical-align

.parent{
		display:table-cell;
		vertical-align:middle;
}

• flex

.parent{
		display:flex;
		align-items:center;
}

水平垂直居中

• flex

.parent{
		display:flex;
		justify-content:center;
		align-items:center;
}

• table-cell+vertical-align+inline-block+text-align

.parent{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.child{
	display:inline-block;
}

两栏布局(一列定宽，一列自适应)

• float+margin

.left{
     float:left;
     margin:200px;
}
.right{
     margin-left:200px;
}

• absolute+margin

.left{
		position:absolute;
		width:200px;
}
.right{
		margin-left:200px;
}

三栏布局(左右两列定宽，中间自适应)

• absolute+margin

.left{
		position:absolute;
		left:0;
		width:100px;
}
.right{
		position:absolute;
		right:0;
		width:100px;
}
.center{
		margin:0 100px 0 100px;
}

• float+margin

.left{
		float:left;
		width:100px;
}
.right{
		float:right;
		width:100px;
}
.center{
		margin:0 100px 0 100px;
}
div里是左右中顺序。