display: flex родителю и margin: auto потомку. При чем поведение при переполнении родителя выравниваемым элементом будет отличаться от других способов, попробуйте на практике.
В веб-кодинге все через жопу, извините за прямоту. Все как-то неясно, нецельно, размыто, одно и то же делается десятью способами. CSS архитектурно выглядит так, словно его вчера выдал публике студент второго курса. JS - то же самое. Этим всем стыдно пользоваться, словно ты соучастник какого-то идиотского движа.