2018.05.29
居中一个元素？你会想到啥？这里面的知识还真不少。包括水平居中，垂直居中，还有水平垂直居中。目录：
如果要再要细分，还要分浮动元素、绝对定位的居中。
为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。
- 第一部分：水平居中
- 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
- 行内元素、不定宽块级元素：text-align
注意：将div#inner 换成 span#inner 效果一样。
样式：
#outer {text-align:center}
水平居中的元素
- 图片的水平居中 ：clear + display + margin
图片的居中，比较特殊。
img {// 设置这三个属性，就可以居中
clear: both;
display: block;
margin:auto;
}
文章图片
水平居中的元素
- 定宽块级元素：margin:0 auto;
注意：样式是在inner元素中添加
样式：
#inner {width:200px;
margin:0 auto;
}
水平居中的元素
- 通用方法(不管行还是块元素，通杀)：flex
#outer {
display:flex;
justify-content:center;
}
水平居中的元素
2、浮动元素的水平居中
由于元素浮动之后，其本身就相当于设置了display:inline-block; 也就是可以设置宽和高了。
所以浮动元素，没有行级和块之分，都是块级或inline-block的元素；只有定宽和不定宽之分
参考：浮动与宽高
- 定宽元素：relative + margin-left + left
注意：样式设置在浮动元素本身
样式：
#inner-float {
position:relative;
left:50%;
margin-left:-100px;
}
id="inner-float" style="float: left;
width: 200px;
">我是要居中的浮动元素
- 不定宽元素：父float + 父relative + 子relative
注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素
#outer {
float:left;
position:relative;
left:50%;
}
#inner-float {
position:relative;
left:-50%;
或 right:50%
}"outer">
"inner-float" style="float: left;
">我是要居中的浮动元素
- 通用(不管是定宽还是不定宽，通杀)：flex
#outer {
display:flex;
justify-content:center;
}
id="inner-float" style="float: left;
width: 200px;
">我是要居中的浮动元素
3、绝对定位元素的水平居中
由于元素绝对定位之后，其本身就相当于设置了display:inline-block; 也就是可以设置宽和高了。
所以绝对定位元素，没有行级和块之分，都是块级或inline-block的元素；只有定宽和不定宽之分
参考链接：绝对定位与宽度
- 定宽的元素：relative + left + …
// 写法一：
#outer {
position: relative;
}
#inner-absolute {
left:50%;
margin-left:-100px;
}// 写法二：
#outer {
position: relative;
}
#inner-absolute {
left:0;
right:0;
margin:0 auto;
}"outer">
"inner-absolute" style="position: absolute;
width: 200px;
">我是要居中的浮动元素- 不定宽的元素：relative + left + translateX
#outer {
position: relative;
}
#inner-absolute {
left:50%;
transform:translateX(-50%);
// translateX是相对自身来计算的。
}"outer">
"inner-absolute" style="position: absolute;
">我是要居中的浮动元素
- 通用方式：不管是否宽度，通杀 flex
#outer {
display:flex;
justify-content:center;
}
id="inner-absolute" style="position: absolute;
">我是要居中的浮动元素
4、总结：水平居中的通用方式(包含常规元素、浮动、绝对定位)：flex
#outer {
display:flex;
justify-content:center;
}
id="inner-absolute">我是要居中的常规、浮动、绝对定位元素，此办法都适用
第二部分：垂直居中
垂直居中，默认外部元素(这里称为父元素)是有高度的常规元素的垂直居中
- 行内文本元素：line-height
#inner {
line-height:40px;
}
id="inner">我是要居中的浮动元素
- 通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex
方式一：diaplay:tabel-cell;
vertical-align
#outer {
display: table-cell;
vertical-align: middle;
}方式二：flex + align-item
#outer {
display:flex;
align-items:center;
}
id="inner">我是垂直居中的元素
注意：#outer{height:100px; display:table} #inner{display:table-cell; vertical-align: middle; } 也可以达到垂直居中，但是不通用。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
}
我是垂直居中的元素
- 通用： flex
#outer {
display:flex;
align-items:center;
}
我是垂直居中的元素
3、绝对定位的垂直居中
绝对定位元素相当于inline-block：没有行和块之分，只有定高和不定高之分。
- 利用绝对定位自身来垂直居中：translateY
#outer {
position: relative;
}
#inner {
top:50%;
transform: translateY(-50%);
// 相对自身向上移动
}
我是垂直居中的元素
- 通用： flex
#outer {
display: flex;
align-items: center;
}
#inner {
line-height:100px;
}
我是垂直居中的元素
4、总结：垂直居中的通用方式(包含常规元素、浮动、绝对定位)：flex
#outer {
display: flex;
align-items: center;
}
#inner {
line-height:100px;
}
我是垂直居中的常规、浮动、绝对定位元素
第三部分：水平垂直居中 1、常规元素的水平垂直居中
- 通用(一列或多列)：(table-cell + vertical-align + text-align) 或 flex
方式1一：table-cell + vertical-align + text-align
#outer {
width:400px;
// 方便看效果
height:500px;
// 方便看效果
display:table-cell;
vertical-align:middle;
text-align:center;
}
#inner {
display:inline-block;
// 适合多列
}- 通用：flex // 见下方
【水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......统统帮你搞定！】子元素可以设置 mairgin 以及word-wrap:break-word; 方便效果
- 通用(一个或多列元素)：flex // 见下方
- 利用绝对定位来水平垂直居中：relative + translate
#outer {
width:400px;
// 方便看效果
height:500px;
// 方便看效果
position: relative;
}
#inner {
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
我是水平垂直居中的元素
- 通用：flex ：见下方
#outer{
width:400px;
// 方便看效果
height:500px;
// 方便看效果
display:flex;
justify-content:center;
aligns-item:center;
}
#inner {
display:inline-block;
// 适合多列
}
我是水平垂直居中的常规、浮动、绝对定位元素
推荐阅读
- JavaScript|JavaScript之DOM增删改查(重点)
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css中元素的显示与隐藏
- CSS3小知识点（如何让彩色图片hover时变成黑白图片）
- 数据库|资源放送丨《 先睹为快！Oracle 20c新特性解析》PPT&视频
- 常用的CSS动画库
- CSS|hover如何控制非hover指向元素的显示隐藏(全攻略)
- css三列布局，两侧宽度固定，中间宽度自由伸缩
- css三列布局，中间div固定，两侧div宽度自适应
- javascript|5大顶尖数字货币交易所（合约交易）换肤方案浅谈