页面中元素居中定位的几种方法

元素居中定位的几种方法

方法一

父元素

position: relative;

子元素

position:absolute;
left: 50%;
top:50%;
transform:translate(-50%,-50%);//正常定位是相对元素左上角定位，要居中需要再进行一定程度的偏移。
//最优解

方法二

父元素

position: relative;

子元素

position: absolute;
margin: auto;//这一句必不可少，相较于方法一较难理解
top: 0;
bottom: 0;
left: 0;
right: 0;