垂直居中

https://www.jianshu.com/p/771350509f76

1、单行文本-单元素:line-height
垂直居中_第1张图片
image.png

单行文本


2、单行文本-多元素: Line-height + inline-block
垂直居中_第2张图片
image.png


该方法和一区别不大,个人更偏向于方法一;

3、多行文本: :before + inline-block
垂直居中_第3张图片
image.png

多行文本
多行文本
多行文本
多行文本


可能会有描述不准确的,各位看官,请多指教!

垂直居中一直采用定位的方式;可每每用,心都在隐隐作痛;终于,在一个阳光明媚的下午,知道了原来垂直居中,也可以不用定位咩!
上代码:

div{
    height: 186px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

你可能感兴趣的