垂直居中
CSS让人头疼的问题就是垂直居中。实现垂直居中好几种方式，但每一种方式都有一定的局限性,所以垂直居中可以根据实际的业务场景来使用。
在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。
- 容器里面的内容只有一行文字？
- 容器自然高度？
- 容器需要指定高度或者避免使用内边距？
- 使用
Flexbox布局？ - 容器和内容的高度都知道？
- 不知道内部元素的高度？
容器里面的内容只有一行文字
设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。
<!DOCTYPE html>
<html lang="en">
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
background-color: #1888fa;
color: white;
}
span {
line-height: 60px;
}
</style>
<body>
<div>
<span>测试居中</span>
</div>
</body>
</html>
容器自然高度
CSS中最简单的垂直居中方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。
看下面的例子, 通过设置padding-top 和padding-bottom相等的值，让内容在父容器垂直剧中。
<!DOCTYPE html>
<html lang="en">
<style>
* {
padding: 0;
margin: 0;
}
div {
padding-top: 20px;
padding-bottom: 20px;
background-color: #1888FA;
color: white;
}
</style>
<body>
<div>
<span>测试居中</span>
</div>
</body>
</html>
容器需要指定高度或者避免使用内边距
可以给父容器设置display: table, 子元素设置display: table-cell; vertical-align: middle;, 让子元素来垂直居中。
<!DOCTYPE html>
<html lang="en">
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100%;
height: 60px;
background-color: #1888fa;
color: white;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div>
<span>测试居中</span>
</div>
</body>
</html>
使用 FlexBox
使用flex布局在做居中的时候非常容易。
<!DOCTYPE html>
<html lang="en">
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: #1888fa;
color: white;
}
</style>
<body>
<div>
<span>测试居中</span>
</div>
</body>
</html>
容器和内容的高度都知道
将内容使用绝对定位， 只有其他方法都无法实现，才推荐这种。
<!DOCTYPE html>
<html lang="en">
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 100px;
background-color: #1888fa;
color: white;
position: relative;
}
span{
position: absolute;
top: 35px;
display: inline-block;
height: 30px;
}
</style>
<body>
<div>
<span>测试居中</span>
</div>
</body>
</html>
不知道内部元素的高度
将内容使用绝对定位 + transform， 只有其他方法都无法实现，才推荐这种。
<!DOCTYPE html>
<html lang="en">
<style>
* {
padding: 0;
margin: 0;
}
div {
height: 100px;
background-color: #1888fa;
color: white;
position: relative;
}
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div>
<span>测试居中</span>
</div>
</body>
</html>
总结
应结合实际的业务场景来具体使用哪种方式。
参考
How to Center in CSS
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！