动态居中字段集中的 div/文本

Question

在字段集中垂直居中文本时遇到问题。尤其是当兄弟姐妹被隐藏时。

这是同级显示时代码的外观：

#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(时，定义不会居中。它看起来像这样：

#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。这是一个表示没有任何同级元素的pseudo-class。对于其他一些示例，请务必对文档进行审查。

/* 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;
}

Answer 2

使用现有代码，只需向 css 添加少量属性即可轻松修复。在这些情况下，Flex 属性非常有用，对齐项目：中心将对齐div 内的所有元素以垂直对齐，对齐内容：中心将水平对齐项目。

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;
display: flex;
justify-content: center;
align-items: center;
}
.center {
justify-content: center;
display: flex;
width: 100%;
flex-flow: row wrap;
}

你可以在这里看到它。