Почему div внутри другого div'a не хочет центрироваться

Question

.yey {
  border: 1px solid red;
}

.block {
  border: 1px solid green;
  text-align: center;
  width: 300px;
  margin: 0 auto;
  height: auto;
}

.p {
  border: 1px solid blue;
  width: 200px;
}

.title {
  border: 1px solid black;
}

<div class="yey">
  <div class="block">
    <div class="title">TITLE</div>
    <div class="p">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, unde!
    </div>
  </div>
</div>

Answer 1

у дива, по дефолту 100% ширина, куда ему центрироваться ?)

    .title {
text-align: center;
}

Answer 2

Это удобно и легко сделать с помощъю Flex:

.block {
  display: flex;
  flex-direction: column;
}

.title, .p {
  margin: 0 auto;
}

.p {
  max-width: 200px;
  text-align: center;
}

Рабочий пример на основе Вашего кода:

.block {
  display: flex;
  flex-direction: column;
}

.title, .p {
  margin: 0 auto;
}

.p {
  max-width: 200px;
  text-align: center;
}

<div class="block">
    <div class="title">TITLE</div>
    <div class="p">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, unde!
    </div>
</div>

Answer 3

.yey {
  border: 1px solid red;
}

.block {
  border: 1px solid green;
  text-align: center;
  width: 300px;
  margin: 0 auto;
  height: auto;
}

.p {
  border: 1px solid blue;
  width: 200px;
  margin: 0 auto;
}

.title {
  border: 1px solid black;
}

<div class="yey">
  <div class="block">
    <div class="title">TITLE</div>
    <div class="p">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, unde!
    </div>
  </div>
</div>

БЛОГ НА HUSL

Почему div внутри другого div'a не хочет центрироваться

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