Div居中在屏幕正中间

一、用margin负值，这种方法适合div的宽高固定。

position:absolute;

left:50%;

top:50%;

margin-left:-宽度的一半;

margin-top:-高度的一半；

二、使用css3新属性translate，这个不需要固定宽高。

position:absolute;

left:50%;

top:50%;

transform:translate(-50% -50%);

三、使用flex布局，这个也不需要固定宽高。但是需要在父容器上面设置

display:flex;

justify-content:center;

align-items:center;

四：将上下左右全设为0.

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

这样全部设为0后会拉伸图片充满父容器，然后margin设为auto会自动填充上外边距，就能实现居中。