目录:
第一部分:水平居中
1、常规元素的水平居中
行内元素、不定宽块级元素:text-align
图片的水平居中 :clear + display + margin
定宽块级元素:margin:0 auto;
通用方法(不管行还是块元素,通杀):flex
2、浮动元素的水平居中
定宽元素:relative + margin-left + left
不定宽元素:父float + 父relative + 子relative
通用(不管是定宽还是不定宽,通杀):flex
3、绝对定位元素的水平居中
定宽的元素:relative + left + …
不定宽的元素:relative + left + translateX
通用方式:不管是否宽度,通杀 flex
4、总结:水平居中的通用方式(包含常规元素、浮动、绝对定位):flex
第二部分:垂直居中
1、常规元素的垂直居中
行内文本元素:line-height
通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex
2、浮动元素的垂直居中
定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
通用方式: flex
3、绝对定位元素的垂直居中
利用绝对定位自身来垂直居中:translateY
通用:flex
4、总结:垂直居中的通用方式(包含常规元素、浮动、绝对定位):flex
第三部分:水平垂直居中
1、常规元素的水平垂直居中
通用(一列或多列):(table-cell + vertical-align + text-align) 或 flex
2、浮动元素的水平垂直居中
通用(一个或多列元素):flex
3、绝对定位元素的水平垂直居中
利用绝对定位来水平垂直居中:relative + translate
通用:flex
4、总结:水平垂直居中的通用方式(包含常规元素、浮动、绝对定位):flex
第一部分:水平居中
1、常规元素的水平居中
行内元素、不定宽块级元素:text-align
注意:将div#inner 换成 span#inner 效果一样。
样式:
#outer {text-align:center}
定宽元素:relative + margin-left + left
注意:样式设置在浮动元素本身
样式:
#inner-float {
position:relative;
left:50%;
margin-left:-100px;
}
定宽的元素:relative + left + …
// 写法一:
#outer {
position: relative;
}
#inner-absolute {
left:50%;
margin-left:-100px;
}
// 写法二:
#outer {
position: relative;
}
#inner-absolute {
left:0;
right:0;
margin:0 auto;
}
不定宽的元素:relative + left + translateX
#outer {
position: relative;
}
#inner-absolute {
left:50%;
transform:translateX(-50%); // translateX是相对自身来计算的。
}
常规元素的垂直居中
行内文本元素:line-height
#inner {
line-height:40px;
}
方式二:flex + align-item
#outer {
display:flex;
align-items:center;
}
2、浮动元素的垂直居中
定高的元素:(relative + absolute + line-height) + top/bottom或margin-top
方式一:relative + absolute + line-height + top/bottom
#outer {
position: relative;
}
#inner {
line-height:100px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
方式二:relative + absolute + line-height + margin-top
#outer {
position: relative;
}
#inner {
line-height:100px;
position: absolute;
top: 50%;
margin-top:-50px
}
利用绝对定位自身来垂直居中:translateY
#outer {
position: relative;
}
#inner {
top:50%;
transform: translateY(-50%); // 相对自身向上移动
}
通用(一个或多列元素):flex // 见下方
3、绝对定位元素的水平垂直居中
利用绝对定位来水平垂直居中:relative + translate
#outer {
width:400px; // 方便看效果
height:500px; // 方便看效果
position: relative;
}
#inner {
top:50%;
left:50%;
transform: translate(-50%, -50%);
}