Как реализовать функцию центрирования кнопки и автоматической прокрутки страницы к этой кнопке при ее нажатии?

Для реализации функции центрирования кнопки и автоматической прокрутки страницы к этой кнопке можно использовать следующий скрипт на JavaScript:

```javascript
function scrollToButton(button) {
    var element = document.getElementById(button);
    var bodyRect = document.body.getBoundingClientRect();
    var elemRect = element.getBoundingClientRect();
    var offset = elemRect.top - bodyRect.top - (window.innerHeight - elemRect.height) / 2;
    
    window.scrollTo({
        top: offset,
        behavior: 'smooth'
    });
}
```

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

```javascript
function scrollToButton(button) {
    var element = document.getElementById(button);
    var bodyRect = document.body.getBoundingClientRect();
    var elemRect = element.getBoundingClientRect();
    var offset = elemRect.top - bodyRect.top - (window.innerHeight - elemRect.height) / 2;
    
    if (offset < 0) {
        offset = 0;
    } else if (offset > document.body.scrollHeight - window.innerHeight) {
        offset = document.body.scrollHeight - window.innerHeight;
    }
    
    window.scrollTo({
        top: offset,
        behavior: 'smooth'
    });
}
```

Этот скрипт будет проверять положение кнопки относительно границ блока и скорректирует положение прокрутки, чтобы кнопка всегда оставалась видимой и центрированной.

Честно говоря, не очень понятна задача, которую вы решаете. 
 Если я правильно понял написанное, то прокрутка не должна работать так, как вы пишете - с дополнительным смещением элементов в начале или в конце. 
 
 https://developer.mozilla.org/en-US/docs/Web/API/E... 
 
 В русской версии: 
 
 


scrollLeft может быть установлен, как любое целое число, однако:



Если элемент не может быть прокручен (т.е. у него нет переполнения), scrollLeft устанавливается в 0.

Если установили значение меньше 0 (больше 0 при расположении элементов справа налево), scrollLeft устанавливается в 0.

Если установлено значение больше, чем максимум прокручиваемого контента, scrollLeft устанавливается в максимум.

 
 
 Может быть вам стоит добавить в начале и в конце какой-нибудь скрытый элемент,  который будет менять размеры в зависимости от того, какой элемент (кнопка) должна быть в центре - чтоб отталкивать от границ контейнера первый и последний элемент. 
 
 Вот это: 
 justify-content: center; 
 
 по-моему, там не нужно. 
 
 P.S. Для более быстрого отклика при разборе простых случаев, полезно так же освоить codepen и т.п. 
 
 Вот, к примеру,  демка для вашего вопроса: 
 https://codepen.io/alkthecode/pen/ZENWGRZ