Css - Вертикальный центр div относительно тела - PullRequest
Новая
       0

Css - Вертикальный центр div относительно тела

0 голосов
/ 24 марта 2020

Я экспериментирую с ReactJS и использую CSS. Я попытался с помощью display: flex сделать так, чтобы мой titleDiv центрировался вдоль вертикальной оси относительно тега body. Я думаю, что это как-то связано с "align-items: center;" не работает? 

     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>

1 Ответ

3 голосов
/ 24 марта 2020

titleDiv центрируется относительно тега body, но тег body занимает не весь экран, поскольку его родительский тег (html) не занимает весь экран. 

html: {
  height: 100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...