总结关于居中的几种方法

1.水平居中(此代码写给父元素)

text-align:center;(行内元素)

  水平居中(此代码写给子元素)

margin:auto;(块级元素)

2.块元素 (需给父元素加定位)(此代码写给子元素)

position: absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

3.块元素 (需给父元素加定位,已知子元素宽200px,高300px)(此代码写给子元素)

position: absolute;

top:50%;

left:50%;

margin:-150px 0 0 -100px;

4.块元素 (需给父元素加定位,未知宽高可用)(此代码写给子元素)

position: absolute;

top:50%;

left:50%;

transform: translateX(-50%) translateY(-50%);

5.flex布局(此代码写给父元素)

display:flex;

justify-content:center;

align-items:center;