我制作了一个渐变背景，我想将这个文本块居中。我的目标是创建一个位于屏幕中间中心的标题，无论视口的分辨率如何。
所以我把这个 header 设置为绝对位置，并使用了我在网上找到的这种集中方法。它完美地集中，问题是，渐变背景变成白色（看起来标题位于正文背景之上，我不知道）。
我已经尝试使用固定位置，但问题仍然存在，其他类型的位置不集中。
* {
margin: 0px;
padding: 0px;
}
body {
background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
}
header {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
<header>
<h1>Hello!</h1>
</header>
您可以在此处运行代码：https://jsfiddle.net/Jhugorn/dsknqp7x/1/如果你去掉 CSS 中的标题，背景就显示得很好。
如何让背景出现并同时居中该元素？
为主体添加一些高度以查看背景：
* {
margin: 0px;
padding: 0px;
}
body {
background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
min-height: 100vh;
}
header {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<header>
<h1>Hello!</h1>
</header>
您的主体不包含流入元素，因此其高度等于0（同样的事情对于html高度），这将使背景的大小为0因此你什么也看不到。
您没有义务给出高度100vh。即使很小的填充也足够了，因为到后台传播。视觉效果不会完全相同，但在这种情况下您几乎不会注意到这一点。
* {
margin: 0px;
padding: 0px;
}
body {
background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
padding:5px;
}
header {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<header>
<h1>Hello!</h1>
</header>
html 上的一个小填充也很好：
* {
margin: 0px;
padding: 0px;
}
body {
background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
}
html {
padding:2px;
}
header {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<header>
<h1>Hello!</h1>
</header>
大填充会让事情看起来不一样！
* {
margin: 0px;
padding: 0px;
}
body {
background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
}
html {
padding:40px;
}
header {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<header>
<h1>Hello!</h1>
</header>
你可以检查这个答案更好地理解传播是如何完成的以及它如何与梯度一起工作。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
