发表于： 2019-06-29 22:57:42
1 804
今天完成的事：写完第一个页面，第二个页面写好了布局，开始调试样式。
明天的计划：完成第二个页面，有时间在做第三个页面。
遇到的问题：暂无。
收获：
几种常用到的垂直居中方法：
1. 使用line-height，适用于单行文字
2. 使用line-height + inline-block 实现多行垂直居中
3. 使用absolute + margin 实现垂直居中
4. 使用absolute + translate 实现垂直居中
5. 使用absolute + margin：auto 实现垂直居中
6. 使用flex + align-items 实现对象垂直居中
7. 使用flex + align-self 实现垂直居中
8. 使用flex + margin 实现垂直居中
9. 使用:before + inline-block 实现垂直居中
10. 使用table-cell + vertical-align 实现垂直居中
11. 使用calc 计算实现垂直居中
（3）常见问题：
1. 使用:before + inline-block实现垂直居中时，子元素黑色的块跟父元素有缝隙？
（4）解决方案：
因为给:before伪元素设置了display：inline-block，而内联块元素之间空格跟换行都会产生缝隙，这里是类似默认他有个空白节点，所以产生缝隙，解决方法就是直接给父元素设置font-size为0即可
（5）编码实战：
1. 使用line-height，适用于单行文字
.div {
border: 1px solid black;
width: 300px;
height: 300px;
line-height: 300px;
}
<div class="div">垂直居中</div>
2. 使用line-height + inline-block 实现多行垂直居中
.main {
border: 1px solid black;
width: 300px;
height: 300px;
line-height: 300px;
}
.main-1 {
display: inline-block;
font-size: 16px;
line-height: 1;
vertical-align: middle;
}
<div class="main">
<div class="main-1">
<div>垂直居中</div>
<div>垂直居中</div>
</div>
</div>
3. 使用absolute + margin 实现垂直居中
.main {
position: relative;
border: 1px solid black;
width: 300px;
height: 300px;
}
.content {
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
width: 100px;
height: 100px;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
4. 使用absolute + translate 实现垂直居中
.main {
position: relative;
border: 1px solid black;
width: 300px;
height: 300px;
}
.content {
position: absolute;
left: 0;
top: 50%;
width: 100px;
height: 100px;
background: black;
transform: translate(0,-50%);
}
<div class="main">
<div class="content"></div>
</div>
5. 使用absolute + margin：auto 实现垂直居中
.main {
position: relative;
border: 1px solid black;
width: 300px;
height: 300px;
}
.content {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
6. 使用flex + align-items 实现对象垂直居中
.main {
display: flex;
align-items: center;
border: 1px solid black;
width: 300px;
height: 300px;
}
.content {
width: 100px;
height: 100px;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
7. 使用flex + align-self 实现垂直居中
.main {
display: flex;
border: 1px solid black;
width: 300px;
height: 300px;
}
.content {
align-self: center;
width: 100px;
height: 100px;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
8. 使用flex + margin 实现垂直居中
.main {
display: flex;
border: 1px solid black;
width: 300px;
height: 300px;
}
.content {
margin: auto;
width: 100px;
height: 100px;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
9. 使用:before + inline-block 实现垂直居中
.main {
border: 1px solid black;
width: 300px;
height: 300px;
}
.main:before {
display: inline-block;
content: "";
width: 5px;
height: 100%;
vertical-align: middle;
background: black;
}
.content {
display: inline-block;
width: 100px;
height: 100px;
vertical-align: middle;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
10. 使用table-cell + vertical-align 实现垂直居中
.main {
display: table-cell;
border: 1px solid black;
width: 300px;
height: 300px;
vertical-align: middle;
}
.content {
width: 100px;
height: 100px;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
11. 使用calc 计算实现垂直居中
.main {
border: 1px solid black;
width: 300px;
height: 300px;
}
.content {
margin-top: calc(50% - 50px);
width: 100px;
height: 100px;
background: black;
}
<div class="main">
<div class="content"></div>
</div>
返回列表
评论