如何实现水平居中和垂直居中

Posted 2020-11-03 Yogic

如何实现水平居中和垂直居中

水平居中：
1.父级：text-alingn:center

2.子级：margin: 0 auto;

垂直居中：
1.height=line-height

2.position+transform

　　2.1---->父级不定高：{postion:relative}  子级：{position:absolute;top:50%;transform:translateY(-50%)}

　　2.2---->父级定高：{height:xxxx;postion:relative}  子级：{position:absolute;top:50%;transform:translateY(-50%)}或父：{height:xxxx}  子：　　{postion:relative;top:50%;transform:translateY(-50%)}

######position的top:50%;left:50%;是相对于界面宽高的。translate的-50%,-50%是相对于div本身宽高的。相当于先将div左上角居中，再将div中心点居中。

3.父级：{display:flex;align-items:center;}-------需要IE9及以上

****另外display:table-cell可以产生一个类似的td，实现上下和左右的居中*******