居中分为水平居中
和垂直居中
1. 水平居中
1.1 文字
text-align:center;
1.2 盒子
1.2.1:inline-block + text-align 一 center;
1.2.2:absolute+transform 一 父元素 display:relative;子元素 display:absolute; left:50%;transform: translatex(-50%);
1.2.3:absolute + margin 一 父元素 display:relative;子元素 display:absolute; left: 0; right: 0; margin:auto;
1.3 文字/盒子
flex布局父元素 display:flex; justify-content: center;
2. 垂直居中
2.1 文字 line-height
line-height = height
2.2 盒子
2.2.1 父元素 display:relative;子元素 display:absolute; top: 50%;transform: translateY(-50%);
2.2.2: absolute+transform
父元素 display:relative;子元素 displav:absolute: top: 0: bottom: 0: margin:auto:
2.2.3: absolute + margin
2.3文字/盒子
2.3.1 flex布局父元素 displav:flex:alian-items: center:
2.3.2: table布局父元素 display:table-cell; vertical-align:middle: