一、水平居中方案一：，接下来我们就来聊聊关于css如何实现垂直居中?以下内容大家不妨参考一二希望能帮到您!
css如何实现垂直居中
一、水平居中
- 行内元素：看父元素是否为块级元素，如果是，给父元素设置text-align: center;如果不是，先给父元素设置：display：block;（看具体布局，以免影响其它元素显示）在设置text-align: center;
- 块级元素：
方案一：
- 固定宽度：margin: 0 auto;
- 不定宽度：设置子元素为display: inline-block / inline;即转换成行内块级/行内元素，给父元素设置text-align: center;
方案二：使用定位属性
- 固定宽度：父元素设置position: relative;子元素设置position: absolute; left: 50%; margin-left: -子元素宽度一半;
- 不定宽度:父元素设置position: relative;子元素设置position: absolute; left: 50%; transform: translateX(-50%);
方案三：使用flexbox布局实现
给父元素设置display: flex; justify-content: center;
二、垂直居中
- 行内元素：只需设置子元素行高和父元素高度相等
- 多行行内元素：给父元素设置display: table;子元素设置display: table-cell; vertical-align: middle;
- 块级元素
方案一：使用定位
- 固定高度：父元素设置position: relative;子元素设置position: absolute; top: 50%; margin-top: -子元素宽度一半;
- 不定宽度:父元素设置position: relative;子元素设置position: absolute; top: 50%; transform: translateY(-50%);
方案二：使用flexbox布局
- 给父元素设置display: flex; align-items: center;
三、水平垂直居中
1.已知宽高
方案一：
给父元素设置positon: relative;给子元素设置position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
方案二：
给父元素设置positon: relative;给子元素设置position: absolute; top: 50%; left: 50%; margin-left: - 子元素宽度一半; margin-top: - 子元素高度的一半;
2.未知宽高
方案一：使用定位
给父元素设置positon: relative;给子元素设置position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
方案二：使用flex布局
设置父元素display: flex; justify-content: center; align-items: center;
,
