Как расположить элементы по центру

Question

Как расположить ссылки так, чтобы они находились по центру?

Я уже видел похожие вопросы и ответы на них, но там всё было запутанно. Хотелось бы увидеть несколько простых ответов на мой вопрос. Всё время я элементы позиционировал по центру с помощью calc()

a {
  text-decoration: none;
}

.btn {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 16.75px;
  text-transform: uppercase;
  border: 2px solid #242424;
  box-sizing: border-box;
  border-radius: 9px;
  transition: 0.3s;
}

._tg {
  position: absolute;
  padding: 25px 136px;
  left: calc(50% - 510px/2 - 0.5px);
  top: calc(50% - 75px/2 + 51.5px);
  background: #0F0F0F;
  color: #739084;
}

._twitch {
  position: absolute;
  padding: 25px 167px;
  left: calc(50% - 510px/2 - 0.5px);
  top: calc(50% - 5px/2 + 124px);
  background: #0F0F0F;
  color: #739084;
}

._vk {
  position: absolute;
  padding: 25px 122.6px;
  left: calc(50% - 510px/2 - 0.5px);
  top: calc(50% - 5px/2 + 233px);
  background: #0F0F0F;
  color: #739084;
}

<div class="btns">
  <a class="btn _tg" href="" target="_blank">telegram</a>
  <a class="btn _twitch" href="" target="_blank">twitch</a>
  <a class="btn _vk" href="" target="_blank">vkontakte</a>
</div>

Answer 1

Используйте flex для этого. Вам нужно задать контейнеру для центрирования display: flex и justify-content: center; align-items: center;, а также разместите их в колонку, используя flex-direction.

Почитайте здесь о Flex

a {
    text-decoration: none;
    margin-bottom: 10px;
}

.btns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.btn {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 16.75px;
    text-transform: uppercase;
    border: 2px solid #242424;
    box-sizing: border-box;
    border-radius: 9px;
    transition: 0.3s;
    padding: 15px 20px;
    width: 300px;
    box-sizing: border-box;
    text-align: center;
}

._tg {
    background: #0F0F0F;
    color: #739084;
    margin-top: 200px;
}

._twitch {
    background: #0F0F0F;
    color: #739084;
}

._vk {
    background: #0F0F0F;
    color: #739084;
}

<div class="btns">
    <a class="btn _tg" href="" target="_blank">telegram</a>
    <a class="btn _twitch" href="" target="_blank">twitch</a>
    <a class="btn _vk" href="" target="_blank">vkontakte</a>
</div>

Answer 2

В обычном потоке можно делать, тогда половина свойств просто не нужна будет. По центру .btns (родитель) легко сделать без абсолютов, а у кнопок отдельные классы вообще не нужны.

.btns {
  max-width: 400px;
  margin: 80px auto;
}

.btn {
  display: block;
  text-decoration: none;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 16.75px;
  text-transform: uppercase;
  border: 2px solid #242424;
  box-sizing: border-box;
  border-radius: 9px;
  transition: 0.3s;
  background: #0F0F0F;
  color: #739084;
  padding: 25px;
  margin-bottom: 20px;
}

<div class="btns">
    <a class="btn _tg" href="" target="_blank">telegram</a>
    <a class="btn _twitch" href="" target="_blank">twitch</a>
    <a class="btn _vk" href="" target="_blank">vkontakte</a>
</div>

Answer 3

Кажется, так немного чище. Проще всего использовать display: flex; для этого, конечно

a {
  text-decoration: none;
}

.btns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  padding-top: calc(70vh - 10rem);
}

.btns>.btn:not(:first-child) {
  margin-top: 2rem;
}

.btn {
  position: relative;
  display: block;
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 16.75px;
  text-transform: uppercase;
  border: 2px solid #242424;
  box-sizing: border-box;
  border-radius: 9px;
  transition: 0.3s;
  padding: 25px 136px;
}

._tg {
  background: #0F0F0F;
  color: #739084;
}

._twitch {
  background: #0F0F0F;
  color: #739084;
}

._vk {
  background: #0F0F0F;
  color: #739084;
}

БЛОГ НА HUSL

Как расположить элементы по центру

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