一、水準居中
行内元素水準居中
text-align:center;
可以實作在塊級元素内部的行内元素水準居中
塊級元素水準居中
1、
margin:0 auto;
要給該元素定寬
2、用
display:table;margin:0 auto;
3、
display:flex;
+
justify-content: center;
4、父元素用
display:flex;
子元素用
margin:0 auto;
多個塊級元素水準居中
1、
display:flex;
+
justify-content:center;
2、将子元素轉為行内塊元素，然後給父元素設定
text-align:center;
浮動元素水準居中
給父元素
display:flex;
+
justify-content:center;
二、垂直居中
單個内聯元素垂直居中
給子元素設定行高等于父元素的高度
多個内聯元素垂直居中
給父元素設定
display:table-cell;vertical-align:middle;
給内部子元素設定
vertical-align:middle;
(可以省略)
注：父元素不能使用浮動
三、水準垂直居中
1、給父元素**
display:flex;
**子元素隻用寫
**margin:auto;**
注：父元素必須有高度
2、給父元素設定
display:flex;justify-content:center;align-items:center;
注：父元素必須有高度
3、利用絕對定位+CSS3（不知道該元素大小）
4、利用絕對定位+
margin:auto
(知道該元素大小)
注：父元素必須有高度