GreenComet - Notes from a web programmer

 There are several ways. All of them are somewhat similar. The first option is the most relevant. Option 1 HTML < html > < body > < div class = " content " > </ div > < footer > </ footer > </ body > </ html > CSS body, html { height : 100% ; } body { display : flex ; flex-direction : column ; justify-content : space-between ; } Option 2 A footer height must be fixed HTML < html > < body > < div class = " content " > < main class = " main " > </ main > </ div > < footer class = " footer " > </ footer > </ body > </ html > CSS html,body { height : 100% ; } .content { min-height : 100% ; } .main { padding-bottom : 200px ; } .footer { height : 200px ; margin-top : -200px ; } Option 3 A footer hei...

There are several ways of vertical alignment. In different situations, different ways are suitable. Consider some of them. 1. With display: flex It's the most convenient and modern way .parent { display : flex ; align-items : center ; } 2. With table-cell In table cells, vertical-align applies to any content. .parent { display : table ; } .child { display : table-cell ; vertical-align : middle ; } 3. With position: absolute и top It is suitable for cases with a known height of the child block. The principle of operation lies in top: 50% (half of the parent block) and a negative indent from above into half of the child block. In the same way, you can center the block horizontally, using only left: 50% and a negative margin on the left. .parent { position : relative ; } .child { position : absolute ; height : 50px ; top : 50% ; margin-top : -25px ; } 4. With position: absolute and margin There is another way...