I am learning JS and one of the tasks I do - is to code simple JS, HTML and CSS oriented code just to help me learn JS and be able to create certain JS web elements and projects so that when I feel I have a good grasp on JS I can apply them to larger projects in the future.
Anyways, I am using:
display: flex;align-items: center;/* AND */justify-content: center;To the "body" in my CSS file. Shouldn't that make elements be displayed automatically in the center, Vertically and Horizontally? I do not have any other CSS rules that would mess with it. I don't think anyways.
However, if I inspect the element and go to the very top line of code - the HTML code that is:<html lang="en">
and then (within Inspect Element still) add the following to the element.styleheight: 100%;
As well as add it to the body tag which I declared in my CSS file.height: 100%;
Poof, it works. It centers the elements to the center of the page vertically. It is already centered horizontally. Just not vertically until I add that code. But I don't think I should have to add a height of 100% to the<html lang="en"> element.style
So what am I doing wrong exactly here? I am using VSCode and then previewing the HTML file with LifeServer extension. I am learning Flexbox - because I just recently started to taking coding serious with the hopes of eventually landing a job (after schooling online).
Here is my code, sorry for the long post. Just incredibly confused.
body { background-color: #dbdbdb; display: flex; align-items: center; justify-content: center;}.arrows { height: 70px;}/* .left-arrow { display: flex; align-items: center; justify-content: center; */}.container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px;}.top { display: flex; align-items: center; gap: 50px;}<div class="container"><div class="top"><img src="images/left-arrow.svg" class="arrows arrow-left" alt="Left Arrow"><div class="frame"><div class="slider"></div></div><img src="images/right-arrow.svg" class="arrows arrow-right" alt="Right Arrow"></div><div class="bottom"></div></div><script src="slider.js"></script>There is no code in the slider.js file. I haven't gotten that far yet.
I have tried changing multiple CSS classes height's from 100% AND 100vh. I am honestly not sure what is going on, I have gotten rid of some HTML elements as well as some CSS elements.