0

I seem to be having trouble centering div's at the center of the screen. I'm pretty new to React and my idea was that most of all the HTML and CSS work the same here. But applying the basic flex properties doesn't seem to work. None of the div's(the red and the blue) seem to be perfectly centered. Here's the code:

screen.jsx

import "./screen.css";
import Box from "../widgets/box/box";

const Screen = () => {
    return (
        <div className="mainScreen">
            <div>
                <Box></Box>
            </div>
        </div>
    );
}

export default Screen;

screen.css

body {
    background-color: rgb(150, 164, 177);
}

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

.mainScreen > div {
    width: 500px;
    height: 500px;
    background-color: red;
}

box.jsx

import "./box.css";

const Box = () => {
    return(
        <div className="box">
            <div></div>
        </div>
    );
}

export default Box;

box.css

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

.box > div {
    background-color: royalblue;
    height: 300px;
    width: 300px;
    border-radius: 10px;
}

This is what it looks like:

enter image description here

coolhack7
  • 1,204
  • 16
  • 35
  • 1
    `.box` is only as big as its content (`.box > div`). If you want it vertical centered, it would need a height bigger than its content. – sallf Oct 26 '21 at 16:41
  • 1
    If you drop the extra `div` around `` then it would have a height of `500px` - which is maybe what you're trying to get to work. – sallf Oct 26 '21 at 16:43
  • @zipzit typo :D but thanks for pointing it out. – coolhack7 Oct 26 '21 at 16:53

0 Answers0