水平居中
1. 行内设置text-align
给父元素设置text-align为center，一般用于实现文字水平居中
2. 给当前元素设置margin：0 auto
原理：块级独占一行，表现为在水平方向上占满整个父容器，当水平方向padding，border，width成定值时，margin左右为auto，默认margin左右平分剩余空间
html"><head><style>.content{width: 600px;height: 300px;border: 1px solid #000;}.box{width: 200px;height: 200px;background-color: darkcyan;margin: 0 auto;}</style>
</head>
<body><div class="content"><div class="box"></div></div>
</body>
但是当该元素设置了position为absolute时，需要加上left为0，right为0才能使margin：0 auto生效，让元素左右边界都紧贴其包含块的边缘。
html">.box{width: 200px;height: 200px;background-color: darkcyan;margin: 0 auto;left: 0;right: 0;position: absolute;
}3. justify-content
父元素设置display为flex布局，justify-content为center，设置盒子在主轴的对齐方式为center
html">.content{width: 600px;height: 300px;border: 1px solid #000;display: flex;justify-content: center;
}4. transform + position
父元素设置relative，子元素设置absolute，left为50%，距离左边偏移父元素50%，transform为translateX（-50%），向左平移自身宽度的50%
5. margin-left + position
与transform类似，只是margin-left为负的自身宽度的一半
当未知宽高时用transform，已知宽高可以用margin-left
垂直居中
1. 单行文本可以设置line-height
设置line-height与height相等
一般用于文字垂直居中
2. align-items
父元素设置flex，align-items为center，定义元素在侧轴对齐方式为center
3. transform + position
与水平居中一样，设置top：50%距离上边偏移父元素50%，transform为translateY（-50%）
4. margin-top + position
与水平居中一样，设置top：50%，margin-top：负的自身高度的一半
5. margin：0 auto
子元素设置absolute定位，top为0，bottom为0，margin设置auto
html">.box{width: 200px;height: 100px;background-color: darkcyan;position: absolute;margin: auto;top: 0;bottom: 0;
}6. table-cell + vertical-align
给父元素设置display为table-cell，vertical-align为middle
整体居中
行内：text-align:center; line-height:height
块级：
1. flex
html">.content{width: 400px;height: 300px;border: 1px solid #000;display: flex;justify-content: center; /*水平居中*/align-items: center; /*垂直居中*/
}2. transform
html">.content{width: 400px;height: 300px;border: 1px solid #000;position: relative;
}
.box{width: 200px;height: 100px;background-color: darkcyan;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)
}3. margin
html">.content{width: 400px;height: 300px;border: 1px solid #000;position: relative;
}
.box{width: 200px;height: 100px;background-color: darkcyan;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -100px;
}
