CSS水平、垂直居中方式

1、水平居中

1.1、行内元素/行内块元素

• 给块级父元素设置 text-align: center;

1.2、块级元素

实现块级元素水平居中有多种方式
1.2.1、块级元素有无固定宽度

• 宽度固定，则直接给该块级元素添加 margin: 0 auto;
• 宽度不固定，默认该块级元素宽度和父元素一样宽，需要把此元素转换为行内或行内块元素，通过给块级父元素设置 **text-align: center;**实现水平居中

1.2.2、定位属性
设置父元素为相对定位，子元素为绝对定位，判断子元素有无固定宽度：

• 宽度固定：left: 50%; margin-left: - 自身宽度一半；
• 宽度不固定：left: 50%; transform: translateX(-50%);

1.2.3、flex布局

• 使用flexbox布局，只需要给该块级元素的父元素添加属性 display: flex; justify-content:center;即可实现主轴（X轴）居中，无需考虑元素宽度。

2、垂直居中

2.1、行内元素

2.1.1、单行行内元素

• 只需给单行行内元素设置"行高(line-height)等于盒子的高(height)"即可；

2.1.2、多行行内元素

• 1.给父元素设置display:table-cell;和vertical-align: middle;

• 2.使用flexbox布局，给父元素添加属性 display: flex; align-items:center;

2.2、块级元素

2.2.1、定位属性
设置父元素为相对定位，子元素为绝对定位，判断子元素有无固定宽度：

• 宽度固定：top: 50%; margin-top: - 自身高度一半；
• 宽度不固定：top: 50%; transform: translateY(-50%);
  2.2.2、flex属性
• 使用flexbox布局，只需要给块级元素的父元素添加属性 display: flex; align-items: center;