元素水平垂直居中的集中方法总结

1、绝对定位水平垂直居中

<div style=" position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: red;" >水平垂直居中</div>

2、水平垂直居中

<div style=" position: relative; width:400px; height:200px; top: 50%; left: 50%; margin: -100px 0 0 -200px; background-color: blue;" >水平垂直居中</div>

3、水平垂直居中

<div style=" position: absolute; width:300px; height:200px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: green;" >水平垂直居中</div>

4、flex 布局居中

<div style="display: flex;align-items: center;justify-content: center;"> <div style="width: 100px;height: 100px;background-color: gray;">flex 布局</div> </div>