Css Вырывание по центру

How to center align container div?

Please post your html and css code here.
Which challenge is in question, and what step you are talking about?

 return(
    <div className='cont'>
    <div className='app'>
      <div className='counter'>{state}</div>
      <div className='controls'>
        <button onClick={() => onChangeCounter(1)}>INC</button>
        <button onClick={() => onChangeCounter(-1)}>DEC</button>
        <button onClick={() => onRandomCounter(-50,50)}>RND</button>
        <button onClick={() => onResetCounter()}>RESET</button>
      </div>
    </div>
    </div>
  );

мне нужно что бы cont ,был по центру.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

Я поняла спасибо за подсказку.

Так кто знает ответ на мой вопрос?

It kind of depends on the total context of the app styles. It would help if you posted a live example on something like StackBlitz.

But using CSS grid is one way.

<div class="container">
  <div class="box"></div>
</div>
.container {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.box {
  background: red;
  height: 200px;
  width: 200px;
}

https://css-tricks.com/centering-css-complete-guide/

1 Like