html - 动态居中 Fieldset 中的 Div/Text

Question

无法在字段集中将文本垂直居中。这尤其是当 sibling 被隐藏时。

This显示兄弟时代码应该是这样的:

    #title {
      margin: 20px;
    }
    
    #definition {
      margin: 0 auto;
      margin-top: 5%;
      text-align: center;
      max-width: 60%;
      font-size: 1.5vmax;
    }
    
    hr {
      color: white;
      background-color: white;
      width: 80%;
      height: 1px;
    }
    
    #formulaLine {
      color: white;
      background-color: white;
      height: 1px;
    }
    
    section#formula {
      width: auto;
      max-width: 70%;
      background: #393e46;
      box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
      border-radius: 5px;
      margin: 5% auto;
      padding: 10px;
      font-size: 2vmax 1vmin;
    }
    
    .center {
      text-align: center;
    }
    
    p .center {
      margin-top: 5%;
    }
    
    .tBox {
      position: relative;
      width: auto;
      max-width: 100%;
      min-height: 400px;
      max-height: 500px;
      background-color: #222831;
      border-radius: 5px;
      margin: 40px auto;
      align-content: center;
      color: #eeeeee;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
      font-family: 'Lato', sans-serif;
    }
    
    .legend {
      padding: 0.2em 0.8em;
      background: #d65a31;
      border-radius: 25px;
      float: left;
      margin-top: -20px;
      margin-left: 20px;
      width: auto;
      min-width: 200px;
      font-size: 3vmax 2vmin;
      font-family: 'Lato', sans-serif;
    }

    <div>
      <fieldset class="tBox">
        <legend class="legend">Definition</legend>
        <div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div>
        <div>
          <hr>
          <section id="formula">
            <div class="row">
              <p class="column center" style="margin-top: 5%; margin-left: 3%;">Formula:</p>
              <div class="column center">
                <p>∑ # completed tasks in month 'A' (from month 'B' schedule)</p>
                <hr id="formulaLine">
                <p>∑ # tasks forecased to finish in month 'A'</p>
              </div>
            </div>
          </section>
        </div>
      </fieldset>
    </div>

问题是当隐藏公式兄弟时(我使用的是 React)，定义不居中。看起来像 this :

    #title {
      margin: 20px;
    }
    
    #definition {
      margin: 0 auto;
      margin-top: 5%;
      text-align: center;
      max-width: 60%;
      font-size: 1.5vmax;
    }
    
    hr {
      color: white;
      background-color: white;
      width: 80%;
      height: 1px;
    }
    
    #formulaLine {
      color: white;
      background-color: white;
      height: 1px;
    }
    
    section#formula {
      width: auto;
      max-width: 70%;
      background: #393e46;
      box-shadow: inset 2px 5px 10px rgb(24, 23, 23);
      border-radius: 5px;
      margin: 5% auto;
      padding: 10px;
      font-size: 2vmax 1vmin;
    }
    
    .center {
      text-align: center;
    }
    
    p .center {
      margin-top: 5%;
    }
    
    .tBox {
      position: relative;
      width: auto;
      max-width: 100%;
      min-height: 400px;
      max-height: 500px;
      background-color: #222831;
      border-radius: 5px;
      margin: 40px auto;
      align-content: center;
      color: #eeeeee;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
      font-family: 'Lato', sans-serif;
    }
    
    .legend {
      padding: 0.2em 0.8em;
      background: #d65a31;
      border-radius: 25px;
      float: left;
      margin-top: -20px;
      margin-left: 20px;
      width: auto;
      min-width: 200px;
      font-size: 3vmax 2vmin;
      font-family: 'Lato', sans-serif;
    }

    <div>
      <fieldset class="tBox">
        <legend class="legend">Definition</legend>
        <div id="definition">MY TEXT HERE. IT CAN GET LONG. MULTI-LINE. HERE'S MORE TO FILL THIS OUT. LONG LONG LONG.</div>
      </fieldset>
    </div>

请注意，第二个示例的 CSS 与上述相同。我究竟做错了什么？我已经尝试过 Top、Float 和各种其他选项。似乎都不起作用。

Answer 1

我建议调整您的标记以支持在 CSS 中使用 :only-child。这是一个伪类，表示没有任何兄弟元素的元素。一定给the documentation对其他一些例子的评论。

/* Selects each <p>, but only if it is the only child of its parent. */
p:only-child {
  background-color: lime;
}

它在这种情况下非常有用，并且实现不需要太多更改。

var formula = document.createElement("P");
formula.innerText = "This element represents your formula being added to the container which removes the styles applied with :only-child.";
var active = false;
function toggleFormula() {
	active = !active;
	document.getElementById("legend").innerText = active ? "Click here to hide formula." :
																			 "Click here to show formula.";
	
	let tbox = document.getElementById("t-box");
	if (active)
		tbox.appendChild(formula);
	else
		tbox.removeChild(formula);
}

.container { position: relative; }
.legend {
  position: absolute;
  top: -10px;
  left: 20px;
  z-index: 1;
  padding: 0.2em 0.8em;
  background: #d65a31;
  border-radius: 25px;
  width: auto;
  min-width: 200px;
  font-size: 3vmax 2vmin;
  font-family: 'Lato', sans-serif;
  cursor: pointer;
}
#definition {
  margin: 0 auto;
  margin-top: 5%;
  text-align: center;
  max-width: 60%;
  font-size: 1.5vmax;
}
#definition:only-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tBox {
  position: relative;
  width: auto;
  max-width: 100%;
  min-height: 400px;
  max-height: 500px;
  background-color: #222831;
  border-radius: 5px;
  margin: 40px auto;
  align-content: center;
  color: #eeeeee;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
  font-family: 'Lato', sans-serif;
}
#definition {
  margin: 0 auto;
  margin-top: 5%;
  text-align: center;
  max-width: 60%;
  font-size: 1.5vmax;
}
#definition:only-child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
	<legend id="legend" class="legend" onclick="toggleFormula();">Click here to show formula.</legend>
	<fieldset id="t-box" class="tBox">
		<div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div>
	</fieldset>
</div>

替代选项是使用 position: absolute 或 display: flex:

/* Absolute Version */
#definition.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Flex Version */
.tBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}