Как разместить svg элемент по центру div адаптивно?

Question

Пробую создать сайт. Дошел до создания ссылок на соц. сети и столкнулся с проблемой. Я хочу, чтобы svg картинка соц. сети была по центру div, который скруглен.

let elements = document.getElementsByClassName("social-link");

function socialHover(event) {
  let element = event.target;
  let img = element.firstChild.nextSibling.firstChild.nextSibling
  element.style.backgroundColor = "green";
  img.style.fill = "black";
}

function socialLeave(event) {
  let element = event.target;
  let img = element.firstChild.nextSibling.firstChild.nextSibling
  element.style.backgroundColor = "black";
  img.style.fill = "green";
}

for (let elem of elements) {
  elem.addEventListener("mouseenter", socialHover);
  elem.addEventListener("mouseleave", socialLeave);
}

.social {
  padding-top: 2vh;
  padding-bottom: 2vh;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.social-link {
  border-radius: 100px;
  !important;
  width: 3vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  text-align: center;
  backgroundColor: black;
}

.social .social-link-img {
  background: transparent;
}

svg {
  display: block;
  margin: auto;
}

<div class="social">
  <div class="social-link tg">
    <svg class="social-link-img" xmlns="http://www.w3.org/2000/svg" width="2vw" height="2vw" fill="none" viewBox="3 -3 34 34">
                            <path fill="#00C2FF" d="M32.321.071h-.046L32.273.07l-.328.065c-4.096.95-7.99 2.414-11.35 4.194-3.046 1.263-9.132 3.878-18.258 7.846C.855 12.763.079 13.338.008 13.9c-.13 1.052 1.343 1.398 3.23 2.005l.02.006.135.044-.136-.044a22.076 22.076 0 0 0 5 1.19h.013a5.872 5.872 0 0 0 3.385-1.25c8.527-5.744 12.929-8.646 13.205-8.709l-.005.002a.762.762 0 0 1 .268-.05.71.71 0 0 1 .387.11.642.642 0 0 1 .146.554c-.157.659-8.166 7.93-8.628 8.41-1.76 1.823-3.765 2.943-.673 4.973 2.674 1.76 4.231 2.882 6.987 4.686 1.76 1.152 3.14 2.518 4.957 2.35.836-.076 1.7-.86 2.139-3.203 1.037-5.533 3.077-17.519 3.547-22.462v.02a5.318 5.318 0 0 0-.05-1.248v-.007a1.318 1.318 0 0 0-.445-.84l.006.004a2.036 2.036 0 0 0-1.175-.37Z"/>
                            <path fill="#00C2FF" fill-rule="evenodd" d="m3.393 15.955-.136-.044.136.044Z" clip-rule="evenodd"/>
                        </svg>
  </div>
  <div class="social-link youtube">
    <svg class="social-link-img" xmlns="http://www.w3.org/2000/svg" width="2vw" height="2vw" viewBox="0 0 34 34" fill="none">
                            <path fill="#00C2FF"
                                  d="M1.01.06h2.901L5.78 5.79h.18L7.742.06h2.926L7.316 8.448v5.949h-2.88V8.714L1.012.06Zm9.963 6.174c0-.841.346-1.51 1.04-2.009.694-.499 1.626-.748 2.797-.748 1.066 0 1.94.264 2.62.79.681.525 1.021 1.201 1.021 2.03v5.61c0 .93-.334 1.659-1.001 2.188-.668.528-1.587.794-2.757.794-1.127 0-2.029-.273-2.706-.82-.676-.546-1.014-1.28-1.014-2.204v-5.63Zm2.651 5.835c0 .3.091.528.275.693.184.163.446.243.786.243.35 0 .627-.081.832-.247.205-.168.309-.397.309-.69V6.154c0-.237-.106-.429-.315-.575-.21-.146-.485-.22-.826-.22-.314 0-.57.074-.766.22a.682.682 0 0 0-.295.575v5.916ZM27.875 3.65v10.863h-2.58v-1.2a5.53 5.53 0 0 1-1.486 1.011c-.514.23-1.014.346-1.498.346-.596 0-1.047-.162-1.35-.485-.302-.324-.453-.809-.453-1.455V3.65h2.581v8.327c0 .259.055.444.163.56.108.114.283.172.525.172.19 0 .43-.076.72-.229.29-.152.556-.346.798-.583V3.65h2.58Zm-2.418 19.225c-.127-.14-.328-.212-.605-.212-.29 0-.498.072-.624.212-.126.141-.189.375-.189.702v.676h1.608v-.676c0-.327-.063-.56-.19-.702Zm-7.626 5.092c.139.057.285.084.44.084.223 0 .385-.054.49-.164.106-.108.158-.288.158-.536v-3.91c0-.265-.064-.464-.194-.6-.13-.137-.32-.204-.565-.204-.13 0-.258.025-.385.075a1.378 1.378 0 0 0-.375.238v4.743c.148.129.292.22.431.274Zm11.97-8.279c0-1.883-1.942-3.41-4.334-3.41A296.839 296.839 0 0 0 15 16.12c-3.562-.006-7.054.044-10.467.159-2.391 0-4.332 1.527-4.332 3.41a44.776 44.776 0 0 0-.2 4.47 44.61 44.61 0 0 0 .2 4.473c0 1.882 1.94 3.409 4.332 3.409 3.413.113 6.905.163 10.467.158 3.563.005 7.055-.045 10.467-.158 2.392 0 4.334-1.527 4.334-3.409A44.73 44.73 0 0 0 30 24.16a44.676 44.676 0 0 0-.2-4.471Zm-23.306 9.49v.112h-2.05v-9.033h-2.12v-1.642h6.291v1.645h-2.12v8.92Zm7.291-7.682v7.794h-1.82v-.861a3.88 3.88 0 0 1-1.047.725 2.554 2.554 0 0 1-1.057.248c-.42 0-.737-.116-.95-.347-.214-.232-.321-.58-.321-1.045v-6.626h1.82v5.976c0 .183.038.318.114.4.077.083.2.124.37.124.135 0 .304-.055.509-.163.204-.11.391-.25.562-.42v-5.916h1.82v.112Zm7.007 1.856v4.324c0 .553-.143.977-.428 1.272-.285.292-.698.44-1.236.44-.356 0-.673-.057-.952-.17a2.397 2.397 0 0 1-.777-.527v.599h-1.837V18.615H17.4v3.4c.245-.239.505-.42.78-.542.277-.124.557-.186.838-.186.575 0 1.016.166 1.32.499.302.332.454.817.454 1.454v.113Zm6.727.239v1.985h-3.48v1.357c0 .41.059.694.179.852.12.159.325.239.614.239.302 0 .514-.067.634-.202.12-.134.18-.43.18-.889v-.541h1.873v.698c0 .799-.227 1.4-.684 1.805-.456.405-1.137.606-2.043.606-.815 0-1.456-.215-1.925-.644-.468-.428-.702-1.018-.702-1.767v-3.61c0-.676.257-1.227.77-1.654.515-.425 1.18-.638 1.994-.638.834 0 1.473.197 1.92.591.446.394.67.962.67 1.701v.112Z"/>
                        </svg>

  </div>
</div>

Однако сейчас картинки соц. сетей находятся не в центре круга. И я ищу способ, чтобы адаптивно сделать, чтобы svg всегда был по центру.

Пробовал использовать

svg {
    display: block;
    margin: auto;
}

Но это не помогает. Единственное, что как-то помогает - редактировать viewBox, меняя первые две цифры. Но это совсем не адаптивно и не практично. Подскажите пожалуйста

Answer 1

.social {
  padding-top: 2vh;
  padding-bottom: 2vh;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.social-link {
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  display: flex;
  justify-content: center;
  text-align: center;
  background: black;
}

.social {
  display: flex;
  flex-direction: center;
  justify-content: center;
  align-content: center;
}

.social-link {
  margin: 0 10px;
}

svg {
  display: block;
  margin: auto;
}

.social-link .social-link-img path {
  fill: green;
}

.social-link:hover .social-link-img path {
  fill: black;
}

<div class="social">
  <div class="social-link tg">
    <svg class="social-link-img" xmlns="http://www.w3.org/2000/svg" width="2vw" height="2vw" fill="none" viewBox="3 -3 34 34">
                            <path  d="M32.321.071h-.046L32.273.07l-.328.065c-4.096.95-7.99 2.414-11.35 4.194-3.046 1.263-9.132 3.878-18.258 7.846C.855 12.763.079 13.338.008 13.9c-.13 1.052 1.343 1.398 3.23 2.005l.02.006.135.044-.136-.044a22.076 22.076 0 0 0 5 1.19h.013a5.872 5.872 0 0 0 3.385-1.25c8.527-5.744 12.929-8.646 13.205-8.709l-.005.002a.762.762 0 0 1 .268-.05.71.71 0 0 1 .387.11.642.642 0 0 1 .146.554c-.157.659-8.166 7.93-8.628 8.41-1.76 1.823-3.765 2.943-.673 4.973 2.674 1.76 4.231 2.882 6.987 4.686 1.76 1.152 3.14 2.518 4.957 2.35.836-.076 1.7-.86 2.139-3.203 1.037-5.533 3.077-17.519 3.547-22.462v.02a5.318 5.318 0 0 0-.05-1.248v-.007a1.318 1.318 0 0 0-.445-.84l.006.004a2.036 2.036 0 0 0-1.175-.37Z"/>
                            <path  fill-rule="evenodd" d="m3.393 15.955-.136-.044.136.044Z" clip-rule="evenodd"/>
                        </svg>
  </div>
  <div class="social-link youtube">
    <svg class="social-link-img" xmlns="http://www.w3.org/2000/svg" width="2vw" height="2vw" viewBox="0 0 34 34" fill="none">
                            <path
                                  d="M1.01.06h2.901L5.78 5.79h.18L7.742.06h2.926L7.316 8.448v5.949h-2.88V8.714L1.012.06Zm9.963 6.174c0-.841.346-1.51 1.04-2.009.694-.499 1.626-.748 2.797-.748 1.066 0 1.94.264 2.62.79.681.525 1.021 1.201 1.021 2.03v5.61c0 .93-.334 1.659-1.001 2.188-.668.528-1.587.794-2.757.794-1.127 0-2.029-.273-2.706-.82-.676-.546-1.014-1.28-1.014-2.204v-5.63Zm2.651 5.835c0 .3.091.528.275.693.184.163.446.243.786.243.35 0 .627-.081.832-.247.205-.168.309-.397.309-.69V6.154c0-.237-.106-.429-.315-.575-.21-.146-.485-.22-.826-.22-.314 0-.57.074-.766.22a.682.682 0 0 0-.295.575v5.916ZM27.875 3.65v10.863h-2.58v-1.2a5.53 5.53 0 0 1-1.486 1.011c-.514.23-1.014.346-1.498.346-.596 0-1.047-.162-1.35-.485-.302-.324-.453-.809-.453-1.455V3.65h2.581v8.327c0 .259.055.444.163.56.108.114.283.172.525.172.19 0 .43-.076.72-.229.29-.152.556-.346.798-.583V3.65h2.58Zm-2.418 19.225c-.127-.14-.328-.212-.605-.212-.29 0-.498.072-.624.212-.126.141-.189.375-.189.702v.676h1.608v-.676c0-.327-.063-.56-.19-.702Zm-7.626 5.092c.139.057.285.084.44.084.223 0 .385-.054.49-.164.106-.108.158-.288.158-.536v-3.91c0-.265-.064-.464-.194-.6-.13-.137-.32-.204-.565-.204-.13 0-.258.025-.385.075a1.378 1.378 0 0 0-.375.238v4.743c.148.129.292.22.431.274Zm11.97-8.279c0-1.883-1.942-3.41-4.334-3.41A296.839 296.839 0 0 0 15 16.12c-3.562-.006-7.054.044-10.467.159-2.391 0-4.332 1.527-4.332 3.41a44.776 44.776 0 0 0-.2 4.47 44.61 44.61 0 0 0 .2 4.473c0 1.882 1.94 3.409 4.332 3.409 3.413.113 6.905.163 10.467.158 3.563.005 7.055-.045 10.467-.158 2.392 0 4.334-1.527 4.334-3.409A44.73 44.73 0 0 0 30 24.16a44.676 44.676 0 0 0-.2-4.471Zm-23.306 9.49v.112h-2.05v-9.033h-2.12v-1.642h6.291v1.645h-2.12v8.92Zm7.291-7.682v7.794h-1.82v-.861a3.88 3.88 0 0 1-1.047.725 2.554 2.554 0 0 1-1.057.248c-.42 0-.737-.116-.95-.347-.214-.232-.321-.58-.321-1.045v-6.626h1.82v5.976c0 .183.038.318.114.4.077.083.2.124.37.124.135 0 .304-.055.509-.163.204-.11.391-.25.562-.42v-5.916h1.82v.112Zm7.007 1.856v4.324c0 .553-.143.977-.428 1.272-.285.292-.698.44-1.236.44-.356 0-.673-.057-.952-.17a2.397 2.397 0 0 1-.777-.527v.599h-1.837V18.615H17.4v3.4c.245-.239.505-.42.78-.542.277-.124.557-.186.838-.186.575 0 1.016.166 1.32.499.302.332.454.817.454 1.454v.113Zm6.727.239v1.985h-3.48v1.357c0 .41.059.694.179.852.12.159.325.239.614.239.302 0 .514-.067.634-.202.12-.134.18-.43.18-.889v-.541h1.873v.698c0 .799-.227 1.4-.684 1.805-.456.405-1.137.606-2.043.606-.815 0-1.456-.215-1.925-.644-.468-.428-.702-1.018-.702-1.767v-3.61c0-.676.257-1.227.77-1.654.515-.425 1.18-.638 1.994-.638.834 0 1.473.197 1.92.591.446.394.67.962.67 1.701v.112Z"/>
                        </svg>

  </div>
</div>

Можно как-то так... js вам тут не нужен.

БЛОГ НА HUSL

Как разместить svg элемент по центру div адаптивно?

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