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;

二、垂直居中

行内元素：只需设置子元素行高和父元素高度相等多行行内元素：给父元素设置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;

本文内容由小梓整理编辑！