1. 简介
css2.1本身没有提供垂直居中的属性，都是通过一些巧妙的方法来实现，当然，都会有或多或少的缺点。所以，还是那句话，如果不考虑兼容到特定的浏览器，建议使用flex和grid。现在的浏览器升级换代非常快，不要把自己局限于消除兼容性bug之中。很可能你今天掌握的hack方法明天就彻底失去了意义。跟着规范走。
2. 单行文本垂直居中
这种情景，只要指定line-height和height同高即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>single-line-text</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background: gray;
line-height: 30px;
height: 30px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="wrap">
inner content
</div>
</body>
</html>
3. 包含多文本，图片或者其他内容的元素居中
一些方法在此我不想介绍，会在下一篇水平垂直居中文章中选择性提到。在此强烈推荐flex和grid的实现方式。
方法1： flex。使用align-items: center即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background: gray;
display: flex;
height: 60px;
align-items: center;
}
.inner {
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">inner content</div>
</div>
</body>
</html>
方法2：grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grid</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
background: gray;
display: grid;
height: 60px;
align-items: center;
}
.inner {
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">inner content</div>
</div>
</body>
</html>
可以看到和flex的不同点在于inner的宽度。当然这个宽度是可以显示设置的。
网友评论