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

Для реализации функции центрирования кнопки и автоматической прокрутки страницы к этой кнопке можно использовать следующий скрипт на 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'
    });
}
```

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

Честно говоря, не очень понятна задача, которую вы решаете. <br/> Если я правильно понял написанное, то прокрутка не должна работать так, как вы пишете - с дополнительным смещением элементов в начале или в конце. <br/> <br/> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/E...</a> <br/> <br/> В русской версии: <br/> <br/> <blockquote><br/>
scrollLeft может быть установлен, как любое целое число, однако:<br/>
<br/>
Если элемент не может быть прокручен (т.е. у него нет переполнения), scrollLeft устанавливается в 0.<br/>
Если установили значение меньше 0 (больше 0 при расположении элементов справа налево), scrollLeft устанавливается в 0.<br/>
Если установлено значение больше, чем максимум прокручиваемого контента, scrollLeft устанавливается в максимум.<br/>
</blockquote> <br/> <br/> Может быть вам стоит добавить в начале и в конце какой-нибудь скрытый элемент,  который будет менять размеры в зависимости от того, какой элемент (кнопка) должна быть в центре - чтоб отталкивать от границ контейнера первый и последний элемент. <br/> <br/> Вот это: <br/> <code class="css">justify-content: center;</code> <br/> <br/> по-моему, там не нужно. <br/> <br/> <b>P.S.</b> Для более быстрого отклика при разборе простых случаев, полезно так же освоить codepen и т.п. <br/> <br/> Вот, к примеру,  демка для вашего вопроса: <br/> <a href="https://codepen.io/alkthecode/pen/ZENWGRZ" rel="nofollow">https://codepen.io/alkthecode/pen/ZENWGRZ</a>