几种垂直居中的方法

  1. 如果父容器不固定高度,padding/line-height(慎用)即可实现元素的垂直居中
几种垂直居中的方法_第1张图片
demo-1
几种垂直居中的方法_第2张图片
demo-1
  1. 如果父容器固定高度
  • display:table-cell
几种垂直居中的方法_第3张图片
demo-2
几种垂直居中的方法_第4张图片
demo-2
  • display:inline-block; vertical-align:middle
几种垂直居中的方法_第5张图片
demo-3
几种垂直居中的方法_第6张图片
demo-3
  • position:absolute;top:50%;left:50%
    • margin-top:-1/2height; margin-left;-1/2width
    • transform:translate(-50%,-50%)
几种垂直居中的方法_第7张图片
demo-4
几种垂直居中的方法_第8张图片
demo-4
  • position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;
几种垂直居中的方法_第9张图片
demo-5
几种垂直居中的方法_第10张图片
demo-5
  • display:flex;justify-content:center;align-items:center
几种垂直居中的方法_第11张图片
demo-6
几种垂直居中的方法_第12张图片
demo-6

完整demo

你可能感兴趣的:(几种垂直居中的方法)