中心DIV

Question

内的SVG我有里面的SVG一个div：

.svg * { 
 
    display: block; 
 
    margin: 0 auto; 
 
    fill: red; 
 
}

<div class="foo ball design"> 
 
    <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"> 
 
    <g> 
 
     <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path> 
 
     <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect> 
 
     <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect> 
 
     <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path> 
 
     <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path> 
 
    </g> 
 
    </svg> 
 
</div>

我要居中的DIV中的SVG。这难道不是居中的SVG当它在其“类似HTML”代码形式的正确方法？ （不知道它叫什么。）

我知道我在正确的目标我顶嘴如fill: red工作。

请指教，让我知道如果你需要看到更多的我的代码，感谢您的时间！

Answer 1

• 充分利用DIV position:relative和SVG position:absolute
• 对于SVG给它top:(calc 50% - 24px)和left:(50% - 24px)

这是一个包含div的高度减去SVG的一半高度，并包含分区的50％，50％宽度减去svg宽度的一半。元素（即svg）的边界是它的父亲（即.foo）边界position:relative。

代码片段

.svg { 
 
    display: block; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    top: calc(50% - 24px); 
 
    left: calc(50% - 24px); 
 
} 
 
.foo { 
 
    height: 150px; 
 
    width: 150px; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    border: 20px solid brown; 
 
    background: black; 
 
}

<div class="foo ball design"> 
 
    <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"> 
 
    <g> 
 
     <path data-color="color-2" fill="#e00" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path> 
 
     <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#e00" width="13.313" height="7.314"></rect> 
 
     <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#e00" width="13.313" height="10.143"></rect> 
 
     <path data-color="color-2" fill="#e00" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path> 
 
     <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path> 
 
    </g> 
 
    </svg> 
 
</div>

Answer 2

尝试使用sudo元素的方法来垂直居中的SVG你的DIV中，如：

.svg * { 
 
    
 
    fill: red; 
 
     
 
} 
 
.foo.ball{ 
 
    text-align:center; 
 
    background-color:#333; 
 
    width:150px; 
 
    height:150px; 
 
    margin:0 auto; 
 
    border-radius: 50%; 
 
    border: 20px solid #945437; 
 
} 
 
.svg{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.foo.ball.design:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<div class="foo ball design"> 
 
    <svg class="svg pen" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"> 
 
    <g> 
 
     <path data-color="color-2" fill="#136f71" d="M5.586,15L15,5.586l-3.293-3.293c-0.391-0.391-1.023-0.391-1.414,0l-8,8 c-0.391,0.391-0.391,1.023,0,1.414L5.586,15z"></path> 
 
     <rect data-color="color-2" x="7.636" y="10.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -5.9203 14.293)" fill="#136f71" width="13.313" height="7.314"></rect> 
 
     <rect data-color="color-2" x="28.05" y="29.636" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -14.3761 34.707)" fill="#136f71" width="13.313" height="10.143"></rect> 
 
     <path data-color="color-2" fill="#136f71" d="M44.085,35.329l-8.757,8.757l9.475,1.895C44.869,45.994,44.935,46,45,46 c0.263,0,0.518-0.104,0.707-0.293c0.236-0.236,0.339-0.575,0.273-0.903L44.085,35.329z"></path> 
 
     <path fill="#136f71" d="M45.707,12.293l-10-10c-0.391-0.391-1.023-0.391-1.414,0l-5.291,5.291l2.706,2.709 c0.39,0.391,0.39,1.024-0.001,1.414C31.511,11.902,31.256,12,31,12c-0.256,0-0.512-0.098-0.708-0.293l-2.705-2.708l-3.584,3.584 l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C25.52,15.902,25.264,16,25.008,16s-0.512-0.098-0.707-0.293l-1.711-1.711 l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414C22.52,22.902,22.264,23,22.008,23s-0.512-0.098-0.707-0.293 l-3.711-3.711l-3.586,3.586l1.711,1.711c0.391,0.391,0.391,1.023,0,1.414C15.52,25.902,15.264,26,15.008,26 s-0.512-0.098-0.707-0.293l-1.711-1.711l-3.586,3.586l3.711,3.711c0.391,0.391,0.391,1.023,0,1.414 C12.52,32.902,12.264,33,12.008,33s-0.512-0.098-0.707-0.293L7.59,28.996l-5.297,5.297c-0.391,0.391-0.391,1.023,0,1.414l10,10 C12.488,45.902,12.744,46,13,46s0.512-0.098,0.707-0.293l32-32C46.098,13.316,46.098,12.684,45.707,12.293z M38,16 c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2s2,0.895,2,2C40,15.105,39.105,16,38,16z"></path> 
 
    </g> 
 
    </svg> 
 
</div>

须藤-件是在运行呈现，而无需编写的一个元素在你的HTML它让你在你的主要内容

，并使用该技术的许多方面，以垂直对齐的元素之一，你可以阅读更多关于它添加许多功能

使用这种方法是在2个步骤中完成步骤之一是须藤元素添加到像容器：

.your_container_class:after{ 
    content:''; 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
} 

和第二步骤是这两个属性添加到要中心内容像：

.your_content_class{ 
    display:inline-block; 
    vertical-align:middle; 
} 

重要提示

在oreder让这项工作的容器本身sholud具有像height属性：

.your_container_class{ 
height:100%/*or 200px; or any other height*/ 
} 

Answer 3

SVG元件应具有display:block，width和margin:0 auto施加到其上，并且不嵌套的元件，但（*）内

svg { 
width : 200px; 
display : block; 
margin : 0 auto; 
} 

更新：

一个更简单的方法是对持有人的div使用text-align:center代替（SVG仍需宽度）

div{ text-align : center; }