# 水平居中
# 水平居中可分为行内元素水平居中和块级元素水平居中
- 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。
.center{
text-align:center;
}
<div class="center">水平居中</div>
1
2
3
4
2
3
4
- 块级元素水平居中
- 定宽块级元素水平居中 只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有
.center{
width:200px;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
1
2
3
4
5
6
2
3
4
5
6
- 不定宽块级元素水平居中
不定宽，即块级元素宽度不固定
方法1：设置table 通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现
.center{
display:table;
margin:0 auto;
border:1px solid red;
}
<div class="center">水平居中</div>
1
2
3
4
5
6
2
3
4
5
6
方法2：设置inline-block（多个块状元素） 子元素设置inline-block，同时父元素设置text-align:center
.center{
text-align:center;
}
.inlineblock-div{
display:inline-block;
}
<div class="center">
<div class="inlineblock-div">1</div>
<div class="inlineblock-div">2</div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
方法3：设置flex布局 只需把要处理的块状元素的父元素设置display:flex,justify-content:center;
.center{
display:flex;
justify-content:center;
}
<div class="center">
<div class="flex-div">1</div>
<div class="flex-div">2</div>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
方法4：position + 负margin； 方法5：position + margin：auto； 方法6：position + transform；
注：这里方法4、5、6同下面垂直居中一样的道理，只不过需要把top/bottom改为left/right，在垂直居中部分会详细讲述。
# 垂直居中
# 单行文本垂直居中
设置paddingtop=paddingbottom；或
设置line-height=height；
# 多行文本垂直居中
通过设置父元素table，子元素table-cell和vertical-align vertical-align:middle的意思是把元素放在父元素的中部
.center{
width:200px;
height:300px;
display:table;
border: 2px solid blue;
}
.table-div{
display:table-cell;
verticaL-aLign: middle;
border:IJX solid red;
)
<div class="center">
<div class="table-div”>多行文本垂直居中〈/div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 块级元素垂直居中
flex布局
在需要垂直居中的父元素上，设置display:flex和align-items：center 要求：父元素必须显示设置height值
.center{
width:200px;
height:300px;
display:flex;
align-items：center
}
<div class="center">
<div>垂直居中〈/div>
</div>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 水平垂直居中
- 方法1：flex布局
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>div{
background: green;
width: 200px;
height: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 方法2：绝对定位+margin:auto
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 方法3：绝对定位+负margin
div{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 方法4：绝对定位+transform
div{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 方法5：table-cell实现居中
设置
display:table-cell;
text-align:center;
vertical-align: middle;
1
2
3
4
5
2
3
4
5