一、水平居中
行内元素水平居中
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
(知道该元素大小)
注:父元素必须有高度