一、內(nèi)聯(lián)元素
1. 定義：
在html中，<span>季稳、<a>、<label>澈魄、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素景鼠。
當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。
內(nèi)聯(lián)元素特點(diǎn)：
1痹扇、和其他元素都在一行上铛漓；
2、元素的高度鲫构、寬度及頂部和底部邊距不可設(shè)置浓恶；
3、元素的寬度就是它包含的文字或圖片的寬度结笨，不可改變包晰。
2.水平居中
在其父元素（父元素一般為div這些塊狀元素）上設(shè)置text-align:center;
或display:flex; justify-content:center;
//html
<div class="father">
<span class="child">子內(nèi)聯(lián)</span>
</div>
//css
.father {
background: red;
text-align: center;
//或display:flex;
//justify-content:center;
}
.child {
background: green;
}
效果:
3. 垂直居中
（1）父元素高度確定的單行文本（內(nèi)聯(lián)元素）,設(shè)置 height = line-height；
.father {
background: red;
height: 100px;
}
.child {
background: green;
line-height: 100px;
}
效果:
（2） 父元素高度確定的多行文本（內(nèi)聯(lián)元素）
a:插入 table （插入方法和水平居中一樣）炕吸，然后設(shè)置 vertical-align:middle伐憾；
b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle；
<style>
.father {
background: red;
height: 100px;
display: table-cell;
vertical-align: middle;
}
.child1 {
background: green;
}
.child2 {
background: yellow;
}
.child3 {
background: blue;
}
</style>
</head>
<body>
<div class="father">
<span class="child1">子內(nèi)聯(lián)1</span>
<span class="child2">子內(nèi)聯(lián)2</span>
<span class="child3">子內(nèi)聯(lián)3</span>
</div>
</body>
效果：
二赫模、塊級(jí)元素
在html中<div>树肃、 <p>、<h1>嘴瓤、<form>扫外、<ul> 和 <li>就是塊級(jí)元素。設(shè)置display:block就是將元素顯示為塊級(jí)元素廓脆。如
a{display:block;}就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點(diǎn)磁玉。
塊級(jí)元素特點(diǎn)：
1停忿、每個(gè)塊級(jí)元素都從新的一行開始，并且其后的元素也另起一行蚊伞。（一個(gè)塊級(jí)元素獨(dú)占一行）
2席赂、元素的高度吮铭、寬度、行高以及頂和底邊距都可設(shè)置颅停。
3谓晌、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致）癞揉，除非設(shè)定一個(gè)寬度纸肉。
1.水平居中
（1）定寬塊狀元素：
設(shè)置 左右 `margin: auto；`
（2） 不定寬塊狀元素：
a:在元素外加入 table 標(biāo)簽（完整的喊熟，包括 table柏肪、tbody、tr芥牌、td）烦味，該元素寫在 td 內(nèi)，然后設(shè)置 margin 的值為 auto壁拉；
b:給該元素設(shè)置 display:inline 方法谬俄；
c:父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:50%
2. 垂直居中
1.知道元素寬高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
or:
<style>
.father {
background: red;
display: table;
width: 300px;
height: 300px;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;//同時(shí)水平居中時(shí)加
}
</style>
</head>
<body>
<div class="father">
<div class="child">
子塊狀
</div>
</div>
2.未知高度:仍然可以通過將其調(diào)高到其一半的高度來進(jìn)行對(duì)中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2.靈活的Flex(推薦)
<style>
.father {
background: red;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background: green;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
子塊狀
</div>
</div>
水平和垂直
1.已知高寬
使用等于該寬度和高度的一半的負(fù)邊距弃理，在將其絕對(duì)定位在50％/ 50％之后凤瘦，將以很好的跨瀏覽器支持為中心：
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.未知高寬
可以使用transform屬性和兩個(gè)方向上的50％負(fù)向平移（它基于元素的當(dāng)前寬度/高度）居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.使用flex布局
要使用flexbox在兩個(gè)方向上居中，您需要使用兩個(gè)居中屬性：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
4.使用網(wǎng)格
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}
