不管是面试还是工作中，垂直居中都是一个经典的不能再经典的问题了，以前我们看的最多的就是盒子固定宽高，只需要设置个定位或者边距就行了，但是，在不知道宽高或者说不考虑宽高的情况下又是怎么样，下面来一一揭晓。
1、表格布局dispaly:table-cell
表格布局前提，是有固定的宽高
html代码：
1
2
3
4
5
| <body>
<div class="container">
<div class="content">内容区块</div>
</div>
</body>
|
css代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .container{
width: 600px;
height: 600px;
background-color: bisque;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content{
display: inline-block;
width: 80px;
height: 80px;
color: red;
background-color: aquamarine;
}
|
2、利用绝对定位，外边距的负50%
前提也是有固定的宽高
html代码：
1
2
3
4
5
6
7
| <body>
<header>
<div class="container">
<div class="content">内容区块</div>
</div>
</header>
</body>
|
css代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| *{
padding: 0;
margin: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.content{
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
border: 1px solid blue;
}
|
3、利用绝对定位，知道宽高，但不用考虑宽高
前提也是有固定的宽高，但不用去考虑宽高如何处理
html代码：
1
2
3
4
5
6
7
| <body>
<header>
<div class="container">
<div class="content">内容区块</div>
</div>
</header>
</body>
|
css代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .container{
width: 600px;
height: 600px;
background-color: bisque;
position: relative;
}
.content{
width: 80px;
height: 80px;
color: red;
background-color: aquamarine;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
|
4、利用绝对定位，transform属性
适合未知宽高的情况，但有一定的虑兼容性问题
html代码：
1
2
3
4
5
6
7
| <body>
<header>
<div class="container">
<div class="content">内容区块</div>
</div>
</header>
</body>
|
css代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .container{
width: 600px;
height: 600px;
background-color: bisque;
position: relative;
}
.content{
color: red;
border: 1px solid #333;
background-color: aquamarine;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
|
4、利用flex，弹性盒子布局
适合未知宽高的情况，但有一定的虑兼容性问题
html代码：
1
2
3
4
5
6
7
| <body>
<header>
<div class="container">
<div class="content">内容区块</div>
</div>
</header>
</body>
|
css代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
| .container{
width: 600px;
height: 600px;
background-color: bisque;
display: flex;
justify-content: center;
align-items: center;
}
.content{
color: red;
border: 1px solid #333;
background-color: aquamarine;
}
|
5、利用js，强行操作
html代码：
1
2
3
4
5
6
7
| <body>
<header>
<div class="container">
<div class="content">内容区块</div>
</div>
</header>
</body>
|
1
2
3
4
5
6
7
8
9
| let container = document.getElementById("container");
let content = document.getElementById("content");
content.style.position = "absolute";
containerW = container.offsetWidth;
containerH = container.offsetHeight;
contentW = content.offsetWidth;
contentH = content.offsetHeight;
content.style.left = (containerW - contentW) / 2 + 'px';
content.style.top = (containerH - contentH) / 2 + 'px';
|
6、其余的一些简单的居中操作
利用背景图片居中
html代码：
1
2
3
4
5
6
7
| <body>
<header>
<div class="head-logo">
</div>
</header>
</body>
|
css代码：
1
2
3
4
5
6
7
8
9
| *{
padding: 0;
margin: 0;
}
.head-logo{
height: 100px;
border: 1px solid red;
background: url("QQ.png") no-repeat center center;
}
|
利用p段落的line-height
html代码：
1
2
3
4
5
6
7
8
9
| <body>
<header>
<div class="head-logo">
<p class="p-img">
<img src="img/logo.png"/>
</p>
</div>
</header>
</body>
|
css代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| *{
padding: 0;
margin: 0;
}
.head-logo{
width: 200px;
height: 200px;
border: 1px solid red;
}
.p-img{
width: 200px;
height: 200px;
line-height: 200px;
}
.p-img img{
vertical-align: middle;
}
|
预览效果：