如何实现一个块元素居中

/ 1.通过计算属性实现元素的垂直水平居中效果 /

position: absolute;
left: calc(50% - 元素宽度一半);
top: calc(50% - 元素高度一半);

/ 2.通过位移实现元素的垂直水平居中效果 /

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

/ 3.通过margin实现元素的垂直水平居中效果 /

position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

/ 4.通过定位配合margin实现元素的垂直水平居中效果 /

position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;

/ 5.通过弹性盒子实现元素的垂直水平居中效果 /

display:flex;
height: 给父级固定高度;
jusitify-content:center;
align-items:center;