CSS实现居中的总结
居中：下文所说的居中皆为盒子在其包含块中居中
包含块：一个元素的尺寸和位置经常受其包含块（containing block）的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区域
包含块的基本规则
1.根元素（html）的包含块：称之为初始包含块，通常与视口大小相同。
2.其他元素的包含块：
- 如果元素的position是
static、relative或sticky，其包含块由最近的块级祖先元素的内容区域(Content Area)决定 - 如果position是
absolute，包含块由最近的position值不是static的祖先元素决定 - 如果position是
fixed，包含块通常由视口决定
居中方式分为三种：水平居中，垂直居中，水平垂直居中。
1.水平居中
1.1、行盒水平居中
利用text-align: center可以实现在块盒内部的行盒水平居中。
此方法对行盒(inline)，行块盒(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。
1
2
3
| <div class="center-text">
行盒水平居中
</div>
|
1
2
3
4
| .center-text{
border: 3px solid lightblue;
text-align: center;
}
|
1.2、块盒元素水平居中
固定宽度的块盒的margin-left和margin-right设成auto，就可以使块级元素水平居中。
1
2
3
| <div class="container">
<p class="center-block">块盒</p>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
| .container{
width: 300px;
height: 100px;
background-color: lightblue;
}
.center-block{
width:30%;
height:100%;
margin:0 auto;
background-color: red;
}
|
1.3、多块盒水平居中
利用inline-block
如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
1
2
3
4
5
| <div class="container">
<div class="inline-block">块盒1</div>
<div class="inline-block">块盒2</div>
<div class="inline-block">块盒3</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .container{
width: 300px;
height: 100px;
text-align: center;
background-color: lightblue;
}
.inline-block{
display: inline-block;
width:30%;
height:100%;
background-color: red;
}
|
flex布局
利用弹性布局(flex)，实现水平居中，其中justify-content用于设置弹性盒子元素在主轴(横向)方向上的对齐方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
| .container{
width: 300px;
height: 100px;
background-color: lightblue;
display: flex;
justify-content: center;
}
.inline-block{
width:30%;
background-color: red;
margin: 10px;
}
|
2.垂直居中
2.1单行行盒垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
1
| <div id="box">行盒垂直居中</div>
|
1
2
3
4
5
6
| #box{
width: 300px;
height: 100px;
line-height: 100px;
background-color: lightblue;
}
|
flex布局
1
2
3
4
5
6
7
| #box{
width: 300px;
height: 100px;
display: flex;
align-items: center;
background-color: lightblue;
}
|
2.2块盒垂直居中
使用绝对定位垂直居中：固定高度，设置上下的坐标为0，将上下的margin改成auto
水平居中同理，固定宽度，设置左右坐标为0，将左右margin为auto
1
2
3
| <div class="container">
<div class="item">块盒垂直居中</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .container{
width: 300px;
height: 100px;
background-color: lightblue;
position: relative;
}
.item{
position: absolute;
height: 20px;
top: 0;
bottom: 0;
margin: auto;
}
|
flex布局（推荐）
1
2
3
4
5
6
7
| .container{
width: 300px;
height: 100px;
background-color: lightblue;
display: flex;
align-items: center;
}
|
2.3未知高度的块盒垂直居中
当垂直居中的块级元素高度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。
1
2
3
4
5
| .item{
position: absolute;
top: 50%;
transform: translateY(-50%);;
}
|
3.水平垂直居中
3.1 flex布局
通过设置 justify-content 和 align-items的值为center达到目的
1
2
3
| <div class="container">
<div class="item">水平垂直居中</div>
</div>
|
1
2
3
4
5
6
7
8
| .container{
width: 300px;
height: 100px;
background-color: lightblue;
display: flex;
justify-content: center; //主轴方向水平居中
align-items: center; //交叉轴方向居中
}
|
3.2 定位布局
父元素设置相对定位，子元素设置绝对定位，这时父元素是子元素的包含块，在设置上下左右的坐标为0，配合margin为auto实现，使用该方法必须固定宽高，不然宽度占满父元素，width的吸收剩余空间能力强于margin
1
2
3
4
5
6
| .container{
width: 300px;
height: 100px;
background-color: lightblue;
position:relative;
}
|
1
2
3
4
5
6
7
8
9
10
| .item{
position: absolute;
height: 40px; //必须设置宽度
width: 100px; //必须设置高度
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
|
未知宽高的情况，利用2D变换，在水平和垂直方向都反向平移宽高的一半，从而使元素水平垂直居中。
1
2
3
4
5
6
| .item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); //
}
|
