居中总结

110 阅读1分钟

方法一:使用定位属性

1.先设置父元素为相对定位,然后再设置子元素绝对定位。然后利用css3属性transform:translate(50%,50%)

1a05d1e50dfb4876a501317c1c320367.png

方法二: 给父元素设置display:flex;

b1f402facbb84aae97bf6b0db1038923.png

方法三: 组合使用display:table-cell和vertical-align,text-align,使父元素里面的所有行内元素水平垂直居中(内部div 设置成:display:inline-block),如果只需要垂直居中,只需要把text-align:center去掉。

3a38b3ec7afc4d47be9d786f8ef56664.png

方法四:采用margin值

确定当前div的高度和宽度,采用margin值为当前div宽度高度的一半的负值。

9e03228ec1bc4e328e8f8d774bf96ca3.png

方法五:绝对定位下top left right bottom都设置成0,同时margin:auto;

d5205737c7b8457c993d87d9cf0f0dd2.png