一、元素分類
首先要知道元素分三種：内聯元素（行内元素）、塊級元素、内聯塊級元素。
1、内聯（行内）元素
- 可與其他元素占一行
- 高、行高、内外邊距不可更改
- 寬度為内容所占寬度，不可更改
- 容納文本或其他行内元素
2、塊級元素
- 獨占一行
- 高、行高、内外邊距可更改
- 不設定寬度的話寬度預設為容器的100%
- 可容納行内元素和塊級元素
3、内聯塊級元素
- 可與其他元素在一行
- 高、寬、行高以及上下邊距可更改
常見内聯（行内）元素：
- a - 錨點
- b - 粗體
- br - 換行
- cite - 引用
- code - 計算機代碼
- em - 強調
- i - 斜體
- img - 圖檔
- input - 輸入框
- label - 表格标簽
- span - 常用内聯容器，定義文本内區塊
- strike - 中劃線
- strong - 粗體強調
- sub - 下标
- sup - 上标
- textarea - 多行文本輸入框
常見塊級元素：
- address - 聯系方式
- audio - 音頻
- vedio - 視訊
- article - 文章
- blockquote - 塊引用
- div - 文檔分區
- form - 表單
- section - 頁面區段
- h1 - 大标題
- h2 - 副标題
- h3 - 3級标題
- h4 - 4級标題
- h5 - 5級标題
- h6 - 6級标題
- hr - 水準分隔線
- header - 頁頭
- menu - 菜單清單
- ol - 排序清單
- ul - 非排序清單
- p - 段落
- table - 表格
常見的内聯塊級元素有：
- img - 圖檔
- input - 輸入
比如：
img{display: inline-block;}
二、水準居中
1、内聯元素水準居中
（1）父級為塊級元素的内聯元素使用 text-align: center
text-align: center
p{
background-color: cyan;
text-align: center;
}
<p>我是内聯文本</p>
可以看到塊級元素
p
是預設寬度是整個容器的100%，并且其容納的文本是内聯元素，使用
text-align: center
讓其水準居中。
text-align: center
僅對内聯元素有效，包括内聯塊級元素。比如對
inline, inline-block, inline-table, inline-flex
的元素同樣有效，因為
inline-block
值将内部
div
顯示為嵌入式元素和塊，是以外部
div
中的屬性
text-align
将内部
div
居中。
2、塊級元素水準居中
（1）單個塊使用 margin: 0 auto
margin: 0 auto
有時需要居中的不是文本，而是整個塊。我們希望左右邊距相等，方法是将邊距設定為“auto”。
這通常用于
固定寬度的塊，如果塊本身是靈活的，它将占用所有寬度，當然，居中效果可能就不明顯了，因為它占了整個寬度。
無論正在居中的塊級别元素或父元素的寬度是多少，這都是有效的。
.block {
width: 200px;
margin: 0 auto;
background-color: aquamarine;
}
<div class="block">我是一個塊，設寬度可見居中效果，不設寬度占滿整個可用寬度</div>
（2）父級為塊級元素的塊級元素水準居中
1）使用 table
table
因為塊級元素設為表格布局之後，将塊級變為了内部單元格
.child-3 {
display: table;
margin: 0 auto;
}
<div class="child">塊級元素(display:table) + (margin:0 auto)</div>
2）多個塊級元素在一行居中
當想讓多個塊級元素在一行内居中時，有兩種辦法：
第一種：将塊級元素變為内聯塊級元素：display: inline-block當把多個塊級元素變為内聯塊級元素時，就可以使用内聯元素居中的辦法
text-align: center;
居中了：
.box {
text-align: center;
background-color: aquamarine;
}
.inline-block {
width: 100px;
height: 50px;
border: 1px #333 solid;
display: inline-block;
}
<div class="box">
<p class="inline-block">塊級1</p>
<p class="inline-block">塊級2</p>
<p class="inline-block">塊級3</p>
</div>
給每個塊級元素設定寬高隻是為了顯示效果。
第二種：使用flex布局.box {
display: flex;
justify-content: center;
}
.box-child {
width: 100px;
height: 50px;
text-align: center; // 是為了把塊級元素中的内聯文本居中
border: 1px #333 solid;
}
<div class="box">
<p class="box-child">塊級1</p>
<p class="box-child">塊級2</p>
<p class="box-child">塊級3</p>
</div>
3）多個塊級元素在一列居中
這個也屬于塊級中的塊級水準居中。
.box p{
margin: 0 auto;
}
.box-child {
width: 100px;
height: 50px;
text-align: center; // 是為了把塊級元素中的内聯文本居中
border: 1px #333 solid;
}
<div class="box">
<p class="box-child">塊級1</p>
<p class="box-child">塊級2</p>
<p class="box-child">塊級3</p>
</div>
（3）定位塊級元素：父相子絕 + transform
父元素使用相對定位，子元素使用絕對定位。
使用了相對定位，就有指定的
top
，
bottom
，
left
，和
right
。子元素的對象使用絕對定位是以設定相對定位的父元素為基礎偏移的，如果沒有設定相對定位的父元素，就以文檔為基礎進行偏移。
由于絕對定位是脫離文檔流的，最好盡量避免使用。
在對使用絕對定位的元素居中時，如果該元素有固定大小，在偏移後，僅需使用邊距進行補償即可。步驟如下：
- 需居中元素設定
left: 50%
50%
- 添加一個負邊距，大小為元素寬度的一半，使得該元素的一半往左移動，中心點與父元素
50%
使用
transform
時，需要相容浏覽器。
.parent {
position: relative;
}
/* 注意相容 */
.child-4-1 {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%)
}
<div class="parent">
<div class="child">定位塊級元素(父相子絕)</div>
</div>
3、浮動元素水準居中
浮動
float
是
CSS
中最常用的布局技術，當使用
float: left
設定元素樣式時，之後元素将重新排版。文檔流是指内容的順序以及元素之間如何排列。如果被浮動的元素沒有設定寬度，它将折疊為内容的寬度。如果之後的元素比剩餘的空間更小，它将向右移動。請記住，設定為
display: block
的元素需要有一個固定寬度，否則它将獨占一行。
可以通過在樣式表中為元素提供一個
clear
屬性來防止元素重新排版。比如
clear: both
、
clear: left
和
clear: right
，還可以使用
clear: none
來覆寫預設行為。
因為被浮動的子元素會導緻父元素崩潰，是以你會很想同時建立新元素來添加
clear:
防止這種行為。雖然這是可行的，但我們希望保持标記的語義性，是以應該隻使用
CSS
來實作。通過使用僞元素
::after
可以建立一個清除浮動
clearfix
：
.container::after {
clear: both;
content: '';
display: table;
}
浮動适合大型容器，不太适用于文本元素，因為它很難對齊。使用
display: inline-block
更适合，請參考上方的内聯元素水準居中。
想要是浮動的元素居中怎麼辦呢，隻有向左向右浮動，沒有向中間浮動，這需要一個中間線，是以設定給浮動元素設定一個父元素，以父元素的中間線為居中标準即可。
（1）浮動元素指定寬：位相 + 負寬一半margin
如果浮動元素需要指定寬度，則在浮動的時候需要以寬度的一半值為負邊距補償。
.child {
position: relative;
float: left;
width: 250px;
left: 50%;
margin-left: -125px;
}
<div class="parent">
<div class="child">
指定寬度：子位相左浮，負一半寬度margin
</div>
</div>
（2）浮動元素不指定寬：父子位相左浮，左右各50%
.parent {
position: relative; // 位相
float: left; // 左浮
left: 50%; // 左50%
}
.child-2-2--p {
position: relative; // 位相
float: left; // 左浮
right: 50%; // 右50%
}
<div class="parent">
<div class="child">
不指定寬度：父子位相左浮，左右各50%
</div>
</div>
（3）浮動元素通用（有無定寬皆可）：flex
.parent {
display:flex;
justify-content:center;
}
.chlid{
float: left;
}
<div class="parent">
<span class="chlid">有無定寬皆可： flex</span>
</div>
以下是例子效果：
三、垂直居中
1、内聯元素垂直居中
（1）單行内聯元素
1）使用填充
有時候，内聯/文本元素可以垂直居中顯示，僅僅是因為它們的上下填充相同。
.parent {
padding-top: 10px;
padding-bottom: 10px;
}
.child {
background-color: cornflowerblue;
display: flex;
flex-direction: column;
justify-content: center;
height: 50px;
}
<div class="parent">
<span class="child">1、單行行内元素使用上下填充相同實作垂直居中</span>
</div>
2）使用行高
如果沒有填充可以選擇時，可以使用行高
.parent {
background-color: aquamarine;
}
.child {
height: 50px;
line-height: 50px;
}
<div class="parent">
<span class="child">1、單行行内元素使用行高實作垂直居中</span>
</div>
（2）多行内聯元素
1）使用 dispaly:table
dispaly:table
多行内聯元素也可以使用上下相同的填充實作居中效果，但如果這不起作用，可能文本所在的元素可以是一個表格單元格，或者是字面上的表格單元格，亦或者是用
CSS
建立的表格單元格。
.parent {
height: 100px;
background-color: cyan;
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
<div class="parent">
<p class="child">3、多行行内元素父級使用dispaly:table (Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>
2）使用flex
記住，隻有父容器有固定高度時，才可以實作。
.parent {
background-color: cornflowerblue;
display: flex;
flex-direction: column;
justify-content: center;
height: 100px;
}
<div class="parent">
<p class="child">4、多行行内元素父級使用flex-direction:column (Lorem ipsum, dolor sit amet consectetur
adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>
3）使用僞元素
.parent {
position: relative;
background-color: thistle;
}
.parent::before {
content: '';
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}
<div class="child-pseudo">
<p class="child-pseudo--p">5、多行行内元素父級使用僞元素 (Lorem ipsum, dolor sit amet consectetur
adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>
2、塊級元素垂直居中
（1）定高：父相子絕 + 上50% + 負上高度一半margin
.parent {
position: relative;
background-color: coral;
}
.child {
position: absolute;
height: 25px;
top: 50%;
margin-top: -12.5px;
}
<div class="parent">
<div class="child">1、父位相，子絕+指定高度+top50%+負高度一半margin</div>
</div>
（2）高度未知： 三種方法
1）父相子絕 + 上50% + 上偏移50%
.parent {
position: relative;
background-color: coral;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class="parent">
<div class="child">1、父位相，子絕+指定高度+top50%+負高度一半margin</div>
</div>
2）父級table布局 + 子table-cell + vertical-align: middle
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
<div class="parent">
<div class="child">高度未知：父級table-cell + 子vertical-align: middlemargin</div>
</div>
3）父級flex + align-items:center
.parent {
display: flex;
align-items: center;
}
<div class="parent">
<div class="child">高度未知：父級flex+align-items:center</div>
</div>
4）父級flex+flex-direction + justify-content
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="parent">
<div class="child">高度未知：父級flex+flex-direction + justify-content</div>
</div>
以下是垂直居中所有效果：
四、水準垂直居中
1、定寬高 ： 父相+子絕左上50%負margin左上負一半高度
.parent {
position: relative;
}
.child {
width: 500px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -250px;
}
<div class="parent">
<div class="child">父相子絕 + transform</div>
</div>
2、寬高未知：父相子絕 + transform
.parent {
position: relative;
}
.child {
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
<div class="parent">
<div class="child">父相子絕 + transform</div>
</div>
3、父flex + justify-content + align-items
.parent {
display: flex;
justify-content: center;
align-items: center;
}
<div class="parent">
<div class="child">父flex + justify-content + align-items</div>
</div>
4、父grid/flex + 子magin:auto
.parent {
/* display: flex; */
display: grid;
height: 50px;
background-color: darksalmon;
}
.child {
margin: auto;
}
<div class="parent">
<div class="child">父grid/flex + 子magin:auto</div>
</div>
5、父table-cell布局 + vertical-align + text-align
.parent {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="child">父table-cell布局 + vertical-align + text-align</div>
</div>
6、父相子絕 + 上下左右0 + margin:auto
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="parent">
<div class="child">父相子絕 + 上下左右0</div>
</div>
以下是例子效果：
：前端技術分享