div에서 SVG를 어떻게 중앙에 배치합니까?

div의 중심에 맞추려는 SVG가 있습니다. div의 너비는 900px입니다. SVG의 너비는 400px입니다. SVG의 여백 왼쪽 및 여백 오른쪽이 자동으로 설정되어 있습니다. 작동하지 않으면 왼쪽 여백이 0 (기본값) 인 것처럼 작동합니다.

누구든지 내 오류를 알고 있습니까?

SVG는 기본적으로 인라인입니다. display: block그것에 추가 하면 margin: auto예상대로 작동합니다.

위의 답변은 저에게 효과적이지 않았습니다. 태그에 속성 preserveAspectRatio="xMidYMin"을 추가하는 <svg>것은 속임수였습니다. viewBox속성뿐만 아니라 작업이 지정 될 필요가있다. 출처 : Mozilla 개발자 네트워크

위의 svg를 기본적으로 인라인으로 읽었으므로 div에 다음을 추가했습니다.

<div style="text-align:center;">

그리고 그것은 나를 위해 속임수를했다.

순수 주의자들은 그것을 좋아하지 않을 수도 있지만 (텍스트가 아니라 이미지 임) 제 생각에는 HTML과 CSS가 엉망이되어 버렸기 때문에 그것이 정당하다고 생각합니다.

이 답변들 중 어느 것도 나를 위해 일하지 않았습니다. 이것이 내가 한 방법입니다.

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

위의 답변은 CSS 관점에서만 말하면 불완전하게 보입니다.

뷰포트 내에서 svg의 위치는 두 개의 svg 속성의 영향을받습니다

1. viewBox : svg가 덮을 사각형 영역을 정의합니다.
2. preserveAspectRatio : viewBox wrt 뷰포트를 배치 할 위치와 뷰포트가 변경되는 경우이를 strech하는 방법을 정의했습니다.

자세한 설명은 codepen에서이 링크를 따라 가십시오.

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">

나는 사용해야했다

display: inline-block;

CSS가 읽었는지 확인하십시오.

margin: 0 auto;

왼쪽과 오른쪽을 자동으로 설정했다고 말하더라도 오류가 발생할 수 있습니다. 물론 코드를 보여주지 않았기 때문에 우리는 알지 못합니다.

당신은 또한 이것을 할 수 있습니다 :

<center>
<div style="width: 40px; height: 40px;">
    <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
        <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
            <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
                <path
                    d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
                    />
            </svg>
        </use>
    </svg>
</div>
</center>

부트 스트랩을div 사용하는 경우이 사이에 코드를 넣으십시오 .

  <div class="text-center ">
  <i class="fa fa-twitter" style="font-size:36px "></i>
  <i class="fa fa-pinterest" style="font-size:36px"></i>
  <i class="fa fa-dribbble" style="font-size:36px"></i>
  <i class="fa fa-instagram" style="font-size:36px"></i>
  </div>

Flexbox는 또 다른 접근 방식입니다. add .container { display: flex; justify-content: center; }및 .containersvg를 포함하는 div에 클래스를 추가하십시오 .

나를 위해 수정 margin: 0 auto;은를 포함하는 요소 에 추가하는 것이 었 습니다 <svg>.

이처럼 :

<div style="margin: 0 auto">
   <svg ...</svg>
</div>