Блог

У меня есть родительский элемент с overflow-y и фиксированной высотой. Я хочу выровнять по центру его дочерний элемент. Содержимое дочернего файла может отличаться по размеру, и иногда оно переполняет родительский файл и запускает полосу прокрутки. В этих случаях вырезается верхнее и нижнее содержимое дочернего элемента.

Я хочу, чтобы дочерний элемент был выровнен по центру, но только если он меньше родительского. Или оно всегда может быть выровнено по центру, но тогда содержимое не должно быть вырезано.

Проверьте проблему здесь: https://jsfiddle.net/gumy023z /

 .parent {
  background-color: red;
  height: 40px;
  overflow-y: scroll;
  
  /* Comment out the flex, and all the content will be available */
  display: flex;
  justify-content: center;
  align-items: center;
}  

 <div class="parent">
  <div class="child">
    This is a test <br> This is a test <br> This is a test
  </div>
</div>  

Выравнивание будет выполняться по оси flex flexbox. Таким образом, вы можете переключиться на гибкий столбец и указать min-height: 0 (который переопределяет настройку по min-width: auto умолчанию для элемента flex) для child элемента — смотрите демонстрацию ниже:

 .parent {
  background-color: red;
  height: 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column; /* ADDED */
  justify-content: center;
  align-items: center;
}

.child {
  min-height: 0; /* ADDED */
}  

 <div class="parent">
  <div class="child">
    1. This is a test <br> 2. This is a test <br> 3. This is a test
  </div>
</div>