元素居中显示的几种方法

第一种情况（子元素宽高不固定）

<div class="parent">
    <div class="child"></div>
</div>

方法一：

只设置父级即可（使用弹性盒子使子元素居中）：

.parent {

display: flex;

justify-content: center;

align-items: center;

}

注意flex弹性盒子的兼容性哦~

方法二：

.parent {

position: relative;

}

.child {

position: absolute;

left: 50%;

top: 50%;

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

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

}

注意transform弹性盒子的兼容性哦~

第二种情况（子元素宽高固定）

上述两种方法依然可以使用！！！

方法三：

只需要设置子元素即可

.child {

margin-left: calc(50% - 1/2width);

margin-top: calc(50% - 1/2height);

}

注意：计算属性calc ，‘-’ 左右的空格是必须的

好啦~~就这样，我个人平时方法一和方法二用的挺多的，做modal框啊，或者任意需要居中的地方通通搞定...只是一定要注意兼容性，可以用加前缀的方法...最后，欢迎补充和指正，感谢感谢~~~