垂直居中的两个方法及Flex布局

发表于

方法一：transform

1
2
3
.parent{
	position:relative;
}
1
2
3
4
5
6
.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

方法二：使用flex布局

1
2
3
4
5
6
7
8
.parent{
  display:flex;
  align-items:center;  //垂直居中
  justify-content:center;  //水平居中
}
.child{
  //子元素可以设置拉伸系数等
}

任何一个容器都可以指定为Flex布局，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

1
2
3
.box{
  display: flex;
}

行内元素也可以用:

1
2
3
.box{
  display: inline-flex;
}

这里顺便总结一下flex的常用属性：

  • flex-direction：主轴的方向–> 水平排列还是垂直排列
    • row row-reverse | column | column-reverse
    • 横着排（主轴是水平）起点在左 | 起点在右端 | 竖着排，起点在上边| 起点在下边
  • flex-wrap：如果一行拍不下是否要换行
    1
    2
    nowrap | wrap | wrap-reverse;
    不换行 | 换行，第一行在上边 |换行，第一行在下边
  • flex-flow: || 简写形式
  • justify-content：在主轴（默认为水平）上的对齐方式
    • flex-start（默认值）：ABCooooooo
    • flex-end：oooooooABC
    • center： oooooABCooooo
    • space-between：AoBoC
    • space-around：oAooBooCo
  • align-items：元素在交叉轴上如何对齐
    • flex-start：交叉轴的起点对齐（一排元素顶端对齐）
    • flex-end：交叉轴的终点对齐（一排元素底端对齐）
    • center：交叉轴的中点对齐。（一排元素中线对齐）
    • baseline: 一排元素的第一行文字的基线对齐。
    • stretch（默认）：如果元素未设置高度或设为auto，将占满整个容器的高度。（每个元素都纵向拉伸）

  • align-content

参考阮大大的博客