垂直居中对齐方法总结

盒子模型

将上下边框宽度设置同一值

• border-width=thin/middle/thick/值

将上下内边距设置同一值

• padding-top/bottom:值/百分比
• padding= 值1 值2
• padding= 值1 值2 值1
• padding= 值1 值2 值1 值3

将上下外边距设置同一值

• margin-top/bottom:值/百分比
• margin= 值1 值2
• margin= 值1 值2 值1
• margin= 值1 值2 值1 值3

定位

position:relative/absolute/fixed;
top:值;
bottom:值;

flex布局

不改变主轴方向时

• 交叉轴中点对齐align-items/content:center
• 交叉轴两端对齐，间隔平均/间隔比边框间隔大一倍align-content:space-between/space-around

改变主轴方向时

前提为flex-direction: column

• 主轴居中对齐justify-content:center
• 两端对齐，间隔平均/间隔比边框间隔大一倍align-content:space-between/space-around