垂直居中元素的几种方式
date
Oct 19, 2022
slug
align-elements-ways
status
Published
tags
Interview
summary
how to align item in different ways
type
Post
方式一： Table
利用Table自带的属性居中元素
代码实现：
方式二： 使用Div 模拟Table
如果明确要求不能使用table，也可以使用div来模拟table效果
代码实现：
方式三： 在内容元素前后添加span撑开高度
这种方式是在内容前后添加span元素并且设置高度为100%，撑开当前元素，然后使用vertical-align实现居中排列。
代码实现：
方式四：方式三的升级版本
方式三的优化升级版本，使用伪类完成方式三的效果
代码实现：
方式五： 绝对定位+Margin -50% 偏移
在已知内容大小宽高的情况下可以通过绝对定位，然后再使用margin 偏移来居中
代码实现：
方式六： 通过绝对定位 + Transform 偏移
这里当然也可以使用绝对定位外加transform偏移实现。
代码实现：
方式七： 通过绝对定位 + margin auto实现
也可以通过绝对定位外加margin auto实现垂直居中
代码实现：
方式八： Flex 布局实现
现在最常用的方式，直接flex 布局实现
代码实现：
