css-水平居中與垂直居中
一，水平居中
1，行內元素 先看它的父元素是不是塊級元素，如果是，則直接給父元素設定 text-align: center；如果不是，則先將其父元素設定為塊級元素，再給父元素設定 text-align: center;
2，塊級元素
方案一：(分寬度定不定兩種情況)
定寬度：需要誰居中，給其設定 margin: 0 auto; （作用：使盒子自己居中）
不定寬度：預設子元素的寬度和父元素一樣，這時需要設定子元素為display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元素，給父元素設定 text-align: center;
方案二：使用定位屬性
首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的left:50%，即讓子元素的左上角水平居中；
設定絕對子元素的 margin-left: -元素寬度的一半px; 或者設定transform: translateX(-50%);
方案三：使用flex佈局
使用flex佈局，只需要給待處理的塊狀元素的父元素新增屬性 display: flex; justify-content: center;
二，垂直居中
1，單行的行內元素
如果是單行文字，則可以設定的line-height的數值，讓其等於父級元素的高度！
2，多行的行內元素
使用給父元素設定display:table-cell;和vertical-align: middle;屬即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#father {
width: 500px;
height: 200px;
background-color: skyblue;
display:table-cell;
vertical-align: middle
}
#son {
background-color: green;
display: inline;
}
</style>
</head>
<body>
<div id="father">
<p id="son">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字</p>
</div>
</body>
</html>
3，塊級元素
方案一：使用定位
首先設定父元素為相對定位，再設定子元素為絕對定位，設定子元素的top: 50%，即讓子元素的左上角垂直居中；
定高度：設定絕對子元素的 margin-top: -元素高度的一半px; 或者設定transform: translateY(-50%);
方案二：flex佈局
父元素display: flex; align-items: center
方案三：table佈局
使用display：table進行垂直居中！給父元素設定display：table；子元素設定為display：table-cell;
方案四：父元素偽類方法
給父元素新增偽類 子元素使用diaplay:inline-block,vertical-align:middle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#father {
width: 500px;
height: 200px;
background-color: skyblue;
text-align:center;
}
#father::after{
content:'';
height:100%;
display:inline-block;
vertical-align: middle
}
#son {
width:150px;
height:100px;
background-color: green;
display:inline-block;
vertical-align: middle
}
</style>
</head>
<body>
<div id="father">
<div id="son">偽類居中</div>
</div>
</body>