CSS使元素水平垂直居中

1.使用彈性佈局

// 父元素設置
display: flex;
justify-content: center;
align-items: center;

2.position絕對定位

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

3.使用position定位和translate變換

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

4.知道元素寬高，使用position定位和calc()

width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);

5.知道元素寬高，使用position定位

width: 100px;
height: 100px;
position: aboslute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;

6.行內元素水平垂直居中，使用display:table-cell和vertical-align:middle

// 父元素設置
display: table-cell;
vertical-align: middle;

7.文字水平垂直居中

text-alignn: center;
line-height: 父元素高度