居中分为水平居中
和垂直居中
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-heightline-height = height2.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 + margin2.3文字/盒子2.3.1 flex布局父元素 displav:flex:alian-items: center:2.3.2: table布局父元素 display:table-cell; vertical-align:middle: