div垂直水平居中经常使用的方法

Posted 2021-01-05 yehongrun

通过定位：

　　父级元素：position: relative;

　　子元素：

　　　　　　 position: absolute;  

　　　　　　top：50%；

　　　　　　left：50%；

　　　　　　transform: translate(-50%,-50%);  // 在不确定自身的高度时

　　　　　　margin: -100px 0 0 -200px;   //  确定自身的高度时，margin-top：负的自生高度一半；margin-left：负的自生宽度一半；

使用弹性盒子

　　父级元素：display: flex;

　　　　　　   align-items: center;

　　　　　　　justify-content: center;

使用 display: table-cell;

　　父级元素： display: table-cell;

　　　　　　　vertical-align: middle;

　　子元素：　margin：0 auto；