How to create a sticky footer

Amir Jafari — Wed, 21 Apr 2021 13:34:10 +0000

Sometimes you don't have enough content in the main section of the project and the footer comes up and you want to have it as a sticky footer on the bottom of the page even when the content is less. In this article, I gonna show you how you can fix this issue.

Assuming this structure:

<body>
    <header><!-- ... --></header>
    <main>
    <!--
        Your content
    -->
    </main>
    <footer><!-- ... --></footer>
</body>

Add these codes for the CSS:

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

I hope it would be helpful for you

Best ways to center objects in CSS (Horizontally and Vertically )

Amir Jafari — Mon, 01 Feb 2021 13:48:02 +0000

In this article, I'm going to show you how you can center your objects horizontally and vertically in CSS in three different ways.

Number one:

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

Number two:

This way is not supported by IE

.parent {
  display: grid;
  place-items: center;
}

Number three:

.parent {
  position: relative;
}
.child {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}

Number four:

Mentioned by @mrdanielschwarz

.parent {
  display: flex or grid;
  height: 100vh;
}
.child {
  margin: auto;
}