Question

我刚刚开始使用 flexbox 并且我尝试将带有背景的 span 元素水平和垂直居中，唯一的问题是当我给 span 一个 display: flex;和高度：100%，背景遍布整个网站，看起来像这样。

是否有可能在使用 flexbox 时摆脱覆盖整个网站的绿色背景并使其仅覆盖文本？提前致谢

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: green;
}

html, body {
    height: 100%;
    margin: 0;
}

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Title</title>
     <link rel="stylesheet" href="normalize.css">
     <link rel="stylesheet" href="styles.css">
     <meta name ="viewport" content="width=device-width, initial-scale=1">
</head>

<span class="box">
    TEST
</span>

Answer 1

您的身体具有 height: 100%;，这就是为什么您的 flexbox 容器 .box 也获得此高度的原因，因为您再次将 .box 高度设置为 100%。因此，当将 .box 设置为 100% 时，您的 height 弹性容器采用它的父 height，即 body。

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* This height is w.r.t parent which is body */
    background: green;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%; /* You need to set this as per your requirement */
    background: green;
}

html, body {
    height: 100%;
    margin: 0;
}

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Title</title>
     <link rel="stylesheet" href="normalize.css">
     <link rel="stylesheet" href="styles.css">
     <meta name ="viewport" content="width=device-width, initial-scale=1">
</head>

<span class="box">
    TEST
</span>

Answer 2

您的代码的问题在于您为 span 标记设置了基本的 flex 规则。这是不对的！我建议您将 span 包装在一个额外的容器中，并将此容器设置为从 span 传输所有 flex 规则。但是只留下span background: green。

如果您有任何问题，请告诉我。我会很乐意回答你。

html, body {
    height: 100%;
    margin: 0;
}

.main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;   
}

.box {
    background: green;
}

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Title</title>
     <link rel="stylesheet" href="normalize.css">
     <link rel="stylesheet" href="styles.css">
     <meta name ="viewport" content="width=device-width, initial-scale=1">
</head>

<div class="main">
  <span class="box">
      TEST
  </span>
</div>

Flexbox 定位和背景

2 个答案: