Center Div/Text in Fieldset Dynamically - html

Question

Having trouble centering text vertically in a fieldset. This particularly when a sibling is hidden.
This is what the code should looks like when the sibling is showing:
#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>
Problem is that when hiding the formula sibling (I am using React), the definition doesn't center. It looks like 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>
Note that the CSS for this second example is the same as above. What am I doing wrong? I've tried Top, Float, and a variety of other options. None seem to work.

Answer 1

I would recommend adjusting your markup to support using :only-child in CSS. This is a pseudo-class that represents an element without any siblings. Definitely give the documentation a review for some other examples.
/* Selects each <p>, but only if it is the only child of its parent. */
p:only-child {
background-color: lime;
}
It's pretty useful for situations just like this and the implementation wouldn't take very many changes.
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>
Alternative options are using position: absolute or 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

With your exiting code, just adding few properties to your css will be an easy fix. Flex properties are really helpful in these scenarios, align-items: center will align all elements inside the div to align vertically and justify-content: center will align items horizontally.
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;
}
You can see it here.