css实现元素居中的常见方法
1、通过 margin 属性调整 :
{ position: absolute; top: 50%; left: 50%; margin-left: 盒子的一半; margin-top: 盒子的一半; }
2、通过 transform 属性调整:
{ position: absolute; top: 50%; left: 50%; transform: translateX(-盒子的一半) translateY(-盒子的一半); }
3、通过绝对定位:注意子绝父相(子元素绝对定位,父元素相对定位)
{ position: absolute; top: 0; left: 0; right: 0; bootom: 0; margin: auto; }
4、通过弹性盒子 :
/* 父盒子 */ { display: flex; justify-content: center; align-items: center; }