How to align Legend tag to center of the screen

To align a <legend> tag to the center of the screen, you can use CSS to style it as a block-level element and center it within its container. Here’s how you can achieve this:

HTML:

<div class="container">
  <fieldset>
    <legend>Centered Legend</legend>
    <!-- Your form elements go here -->
  </fieldset>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Set the container height to take up the full viewport height */
}

fieldset {
  border: 1px solid #ccc;
  padding: 20px;
}

legend {
  display: block;
  text-align: center;
  font-size: 24px; /* Adjust the font size as needed */
  font-weight: bold;
}

Explanation:

1. We wrap the <fieldset> and <legend> tags inside a container element with the class “container.” The container uses flexbox (display: flex) to horizontally and vertically center its children.
2. The <fieldset> element represents a set of form controls and has a border and padding to provide some visual distinction.
3. The <legend> element is styled as a block-level element using display: block, allowing us to apply text-align centering to it.
4. We use text-align: center on the <legend> element to horizontally center the content within it.
5. You can adjust the font size and other styles within the legend selector to customize the appearance of the centered legend.

By using this approach, the <legend> tag will be centered within the container element, which will take up the full viewport height (100vh). The content of the legend will be centered both horizontally and vertically on the screen.