這一部分的東西確實很多很雜，方法多樣，限制也重重茬斧，掌握不好腰懂，你絕對會抓狂，怎么會這樣项秉？怎么不行绣溜？怎么對不齊？css的基礎(chǔ)絕對是重中之重
一些通用方法
水平居中
子元素為行內(nèi)元素還是塊狀元素娄蔼，寬度一定還是寬度未定怖喻，采取的布局方案不同。下面進行分析：
行內(nèi)元素：對父元素設(shè)置text-align:center;
定寬塊狀元素: 設(shè)置左右margin值為auto;
不定寬塊狀元素: 設(shè)置子元素為display:inline,然后在父元素上設(shè)置text-align:center;
通用方案: flex布局岁诉，對父元素設(shè)置display:flex;justify-content:center;
垂直居中
垂直居中對于子元素是單行內(nèi)聯(lián)文本锚沸、多行內(nèi)聯(lián)文本以及塊狀元素采用的方案是不同的。
父元素一定唉侄，子元素為單行內(nèi)聯(lián)文本：設(shè)置父元素的height等于行高line-height
父元素一定咒吐，子元素為多行內(nèi)聯(lián)文本：設(shè)置父元素的display:table-cell或inline-block，再設(shè)置vertical-align:middle;
塊狀元素:設(shè)置子元素position:fixed（absolute）属划，然后設(shè)置margin:auto;
通用方案: flex布局恬叹，給父元素設(shè)置{display:flex; align-items:center;}。
（1）父元素一定同眯，子元素為多行內(nèi)聯(lián)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.farther{
width: 200px;
height: 300px;
display: table-cell;
border: 1px solid #1E90FF;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="farther">
<span class="son">翩若驚鴻绽昼，婉若游龍，
仿佛兮若輕云之蔽月须蜗，飄搖兮若流風之回雪</span>
</div>
</body>
</html>
（2）子元素寬高確定硅确，父元素寬高不定的子元素垂直水平居中
image.png
html結(jié)構(gòu)
image.png
css結(jié)構(gòu)
image.png
