水平居中
1、宽度固定：
- 子： margin：0 auto；
- 子： transform
2、父、子宽度都不固定
- 父： text-align：center；
前提：子元素是inline-block - 父： display: flex; justify-content: center; （多个子也可以居中）
垂直居中
1、单行文本
line-height： 30px；
2、多行文本
父： display：table；vertical-align： middle;
子： display: table-cell; vertical-align： middle;
3、图片和文字居中
vertical-align： middle;
垂直、水平居中：
1、定位法
父：position：relative
子：position： absolute；left： 50%； top： 50%；transform： translate(-50%, -50%);
2、flex布局
父：display： flex； align-items： center； justify-content： center；
网友评论