Css - Vertically center div with respect to body

Question

I am experimenting with ReactJS and using CSS . I tried using display:flex to make my titleDiv to center along the vertical axis with relation to the body tag. I think it has something to do with the "align-items: center;" not working?

     body{
        height: 100%;
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center; //makes the children centre horizontally
        align-items: center;
      }
      #titleDiv {
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          width: 50%;
          height: 200px;
          border-radius: 10px;
          border: 3px dashed #1c87c9;
          justify-content: center;
          align-items: center;
      }
      #title {
          margin: auto; /* Important */
          text-align: center;
      }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <title>HubOS</title>
  </head>
  <body>
    <div id="titleDiv"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
    <script type="text/babel">
      class Title extends React.Component {
          render() {
              return (
                <p id="title">HubOS</p>
              );
          }
      }
      ReactDOM.render(
          <Title />,
          document.getElementById('titleDiv')
      );
    </script>
  </body>
</html>

Does this answer your question? [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Rob, Mar 25 '20 at 00:29

score 3 · Accepted Answer · answered Mar 24 '20 at 16:03

3

titleDiv is centered with respect to body tag, but body tag is not taking the entire screen since its parent tag (html) is not taking the entire screen.

html: {
  height: 100%;
}

answered Mar 24 '20 at 16:03

Kox

834
7
12

1

The answer is partially correct, another issue is comment inside css `//makes the children centre horizontally` which breaks next css rule – Mr T Mar 24 '20 at 16:04
That's right, but I assume that's not in the original code. – Kox Mar 24 '20 at 16:06
1

wow that works! thks! and this Mr T for reminding me that css doesn't have line commenting haha! – Red Mar 24 '20 at 16:18

Css - Vertically center div with respect to body

1 Answers1