水平垂直居中

1.給元素定位使之居中（利用定位和transform平移的那種方法就不需要寫了）

為居中元素的父級新增以下樣式：

原因：為元素設定absolute定位時需要為父級設定非static定位

position: relative;

為居中元素新增以下樣式：

注意：不給居中元素設定寬高的話，該元素會與設定非static定位的父級（沒有的話會是html元素）同寬高。

width: 40px;
height: 40px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

我們可利用上面的定位方式讓一個元素與瀏覽器頁面顯示區域同寬高，具體方法如下：

設定html元素寬高：

width: 100%;
height: 100%;

設定該元素樣式如下（該元素與html元素之間的元素不要設定非static定位）：

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

2.設定彈性佈局使子元素居中兩種方式

方式一:為居中元素父級設定以下樣式：

width: 400px;
height: 400px;
display: flex;

為居中元素新增以下樣式：

margin: auto;

方式二:為居中元素父級設定以下樣式：

display: flex;
align-items: center;
justify-content: center;

垂直居中

利用行高居中

為居中元素父級設定以下樣式：

此方法可為元素內文字和行元素設定垂直居中

line-height: 50px;

水平居中

1.利用margin實現居中

為居中元素新增以下樣式：

必須為居中元素設定寬

width: 200px;
margin: auto;

2.利用text-align樣式居中

為居中元素父級新增以下樣式：

此方法可為元素內文字和行元素設定垂直居中

text-align: center;