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;