CSS布局

水平居中

• 子元素宽度指定：

  • 用法

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

• 子元素宽度指定：width+position+margin

  • 用法：子元素给定宽度，子元素postion:absolute;，子元素margin-left:宽度一半

.child{
  position:absolute;
  top:0;
  left:50%;
  width:;
  margin:-width/2;
}

• inline-block + text-align

  • 用法

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

• 缺点：child中的文字也会居中显示，可以子元素text-align:left恢复左侧显示

• table + margin

  • 用法

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

• position + transform

  • 用法

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
}

• flex + margin

  • 用法

.parent{
  display:flex;
}
.child{
  margin:0 auto;
}

• 注：子元素的高度会默认为父元素的高度

• flex + justify

  • 用法

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

垂直居中

• 给定子元素的高度：position + margin
  • 用法

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  margin:auto 0;
}

• 给定子元素的高度：position + margin

  • 用法

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:0;
  margin-top:-width/2;
}

• tabel-cell + vertical

  • 用法

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

• position + transform
  • 用法

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
}

• flex + align-items

  • 用法

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

水平垂直居中

• 给定宽度和高度：position + margin

  • 用法：

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-宽度的一半;
  margin-top:-高度的一半;
  width:宽度;
  height:高度;
}

• 给定宽度和高度：position + margin
  • 用法：

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;

  width:xxx;
  height:xxx;
}

• position + transform

  • 用法

.parent{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

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

• 用法

.parent{
  display:table-cell;//加这个才能实现垂直居中
  text-align:center;//用于水平居中
  vertical-align:middle;//用于垂直居中
}
.child{
  display:inline-block;
}

• flex + align-items + justify-content + align-items

  • 用法

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

左右布局：左侧定宽，右侧自适应

• float + overflow

  • 使用：

//左侧可以不设定宽度，不设定，则为left内部的文字的宽度
//如果不设置宽度，会导致文字过多是，覆盖右侧
.left{
  float:left;
}
.right{
  overflow:hidden;//添加后
}

• float + margin

  • 使用

//左侧可以不设定宽度，不设定，则为left内部文字的宽度,但是因为margin一般设置为left的宽度
//如果不设置可能会导致超出设置margin值的情况
.left{
  float:left;
}
.right{
  margin-left:left的宽度;//一般为left的宽度，但是具体大小可以自己定义
}

• table

  • 使用

.parent{
  display:table;
}
.left{
  width:100px;
}
.left,.right{
  display:table-cell;
}

• flex

  • 使用

.parent{
  display:flex;
}
.right{
  flex:1;
}

三列布局

两列定宽一列自适应

• 左中定宽，右自适应

  • 使用

.left{
  width:100px;
  float:left;
}
.mid{
  width:100px;
  float:left;
}
.right{
  overflow:hidden;//不加，right的宽度为父元素的宽度
}

• 左右定宽，中自适应

• 绝对定位

  • 使用

.parent{
  position:relative;
}
.left{
  position:absolute;
  top:0;
  left:0;
  width:100px;
}
.right{
  position:absolute;
  top:0;
  right:0;
  width:100px;
}
.middle{
  margin:0 100px;
}

• float + margin

• 使用：注意html的写法

.left{
  float：left;
  width:100px;
  margin-left:-100%;
}
.mid-parent{
  width:100%;
  float:left;
}
.middle{
  margin:0 100px;
}
.right{
  float:left;
  width:100px;
  margin-left:-100px;
}

• float + margin

• 使用：注意html的写法

.left{
  float:left;
  width:100px;
}
.right{
  float:right;
  width:100px;
}
.main{
  margin:0 100px;
}

带图片的布局地址