css如何实现垂直居中（CSS水平垂直居中）

一、水平居中方案一：，接下来我们就来聊聊关于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;

二、垂直居中

1. 行内元素：只需设置子元素行高和父元素高度相等
2. 多行行内元素：给父元素设置display: table;子元素设置display: table-cell; vertical-align: middle;
3. 块级元素

方案一：使用定位

• 固定高度：父元素设置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;