CSS | Как мне блок, внутри которого блок, выровнить по центру

Question

Нужна помощь с выравниваниями! Я делаю первое приложение на Vue3: "Counter Clicker", также изучаю CSS. Но дело в чём, у меня есть главный <div>, в нём располагается <div class="App">. И там всякое, я пока добавил красоту, но ещё не добавлял функционал. Если навестить на .App, то ширина увеличивается. Потому, мне нужен самый верхний - главный <div>. Но когда я увеличиваю ширину блока, то он увеличивается в другую сторону. Поэтому я делал так, чтобы главный <div> располагал дочерние тэги по центру. Но я не знаю как. Помогите, вот мой код:

#count {
  font-size: 60px;
}
.main-app {
  align-items: center;
}
.App {
  position: absolute;
  background-color: rgb(220, 220, 220);
  border-width: 8px;
  border-style: solid;
  border-color: rgb(35, 35, 35);
  padding-bottom: 15px;
  border-radius: 67px;
  width: 700px;
  align-items: center;
  transition-duration: 0.5s;
}
.App:hover {
  width: 1000px;
}
.container {
  text-align: center;
}
.btn {
  margin: 5px;
  height: 40px;
  width: 140px;
  font-size: 24px;
  outline: none;
  border-radius: 30px;
}
.increment {
  background-color: rgb(100, 248, 100);
}
.decrement {
  background-color: rgb(248, 100, 100);
}

<div class="main-app">
    <div class="App">
      <h1 style="text-align: center">
        You counted it <span id="count">{{ count }}</span> times.
      </h1>
      <hr />
      <div class="container">
        <button @click="increment" class="btn increment">Увеличить</button>
        <button @click="decrement" class="btn decrement">Уменьшить</button>
      </div>
    </div>
</div>

То есть нужно сделать чтобы было вот так:

Answer 1

.main-div{
  width: 100%;
  height: 100px;
  border: 1px solid;
  
}
.second-div{
  width: 300px;
  height: 100px;
  border: 1px solid;
  margin: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="main-div">
    <div class="second-div">
      
    </div>
  </div>
</body>
</html>

БЛОГ НА HUSL

CSS | Как мне блок, внутри которого блок, выровнить по центру

Ответы (1 шт):