Stanislav Machel Stanislav Machel - 6 months ago 13
CSS Question

Center footer content vertically and horizontally independently of footer size and tag count

I want center all content in footer under

id="footer-content"
to always in horizontally and vertically centered independently of footer size and tag count. If change the footer size or add/remove some tag, the footer content must stay center horizontal and vertical.

#footer {
min-height: 100px;
height: 100%;
background-color: #f5f5f5;
text-align: center;
vertical-align: middle;
border-style: dashed;
}

<footer id="footer">
<div id="footer-content">
<p>My text</p>
<p>My text</p>
</div>
</footer>

Answer

I'm not exactly sure what you're asking, but given a height to its child, this flexbox solution is bound to work. Both horizontally and vertically:

#footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 90px); <!--Arbitrary-->
  background-color: #f5f5f5;
  border-style: dashed;
}

It's important to have a height - as mentioned above - otherwise the vertical align will not work. You can use many units to set it, such as px, vh, em, etc.

Comments