17

我正在尝试找出一种将我的 SVG 标签垂直居中的方法。

基本上，这是我试图居中的简化 SVG 代码：

<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
        <g id="1" style="font-size: 0.7em;">
            <image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
        </g>
    </g>
</svg>

我可以毫不费力地将它放在页面的中间（水平来说），但是我也希望它垂直居中。

我可以添加包装器，但我想知道这样做的通用方法，而不取决于 SVG 大小或窗口大小。

我尝试了多种方法，但没有任何效果。

谢谢，

4

5 回答 5

24

我更新了这个答案，因为当前的浏览器对此有更好的解决方案。

聪明人说，第一年你学习html和css，再过几年你学习高级javascript，五年后你终于学会了如何垂直居中div。

要垂直/水平对齐 CSS 中的任何内容，您可以使用两种主要方式：

绝对

<div class="outside">
    <div class="inside">Whatever</div>
</div>

和CSS：

.outside{
    position:relative;
}
.inside{
    position:absolute;
    top:50%;
    bottom:50%;
    transform:translate(-50%, -50%);
}

唯一的问题是元素不会生成高度。

弹性盒

Flexbox 现在有很好的支持，所以为什么不使用它。https://caniuse.com/#feat=flexbox

使用 flexbox 您的项目不需要是绝对的，因此它会生成高度。代码：

<div class="outside">
    <div>Whatever</div>
</div>

和CSS：

.outside{
    display: flex;
    align-items: center;
    justify-content: center;
}

老答案：

你有高度和宽度，所以你可以使用margin : auto auto;

或者把它放在 div 中

position:absolute ;
left:50% ;
margin-left: -(half of width of image)px;
top:50% ;
margin-top: -(half of height of image)px;

如果你会用它做一些事情（javascript动画或其他东西），第二个会更好

我没有检查它，但也许你也可以使用 svg 的第二个选项（没有外部 div）

于 2013-01-14T11:24:38.530 回答
3

这很简单！

HTML：

<div class="a">
<div class="b">
<div class="c">
<!-- Your SVG Here -->
</div>
</div>
</div>

CSS：

<style>
.a {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.b {
display: table-cell;
vertical-align: middle;
}

.c {
margin-left: auto;
margin-right: auto; 
height: /* Your size in px, else it will expand to your screen size!*/
width:  /* Your size in px, else it will expand to your screen size!*/
}
</style>
于 2015-09-07T18:31:12.073 回答
1

如果您为您的svg元素提供一个viewBox属性并将其width&height属性设置为，100%那么一切都应该很好（在大多数浏览器中..）

$(document).ready(function(){
  $(".panel-left").resizable({handleSelector: ".splitter",containment: "parent"});
});
#ctr
{
	position:        absolute;
	border:          1px solid #131313;    
	top:             5%;
	left:            5%;
	bottom:          5%;
	right:           5%;    
	display:         flex;
	flex-direction:  row;    
}

#ctr svg
{
	height:    100%;
	width:     100%;
}

.panel-left 
{
  flex:         0 0 auto;
  padding:      10px;
  width:        50px;
  min-height:   50px;
  min-width:    50px;
  max-width:    80%;
  max-height:   100%;
  white-space:  nowrap;
  background:   #131313;
  color:        white;
}

.splitter 
{
  flex:         0 0 auto;
  width:        18px;  
}

.panel-right 
{
  flex:         1 1 auto;
  padding:      10px;
  min-width:    20px;
  background:   #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div style="visibility:hidden; position:absolute; width:0">
	<svg>
	  <g id="my-funky-svg-defs">
		<defs>
		  <radialGradient id="gradient" cx="25%" cy="25%" r="100%" fx="40%" fy="40%">
			<stop offset=  "0%" stop-color="hsla(313,  80%, 80%, 1)"/>
			<stop offset= "40%" stop-color="hsla(313, 100%, 65%, 1)"/>
			<stop offset="110%" stop-color="hsla(313, 100%, 50%, 0.7)"/>
		  </radialGradient>
		</defs>    
		<title>smarteee</title>
		<circle  class="face" cx="200" cy="200" r="195" fill="url(#gradient)" />
		<ellipse class="eye eye-left" cx="140" cy="150" rx="10" ry="40" fill="#131313"/>
		<ellipse class="eye eye-right" cx="260" cy="150" rx="10" ry="40" fill="#131313"/>
		<path class="smile" d="M120,280 Q200,330 280,280" stroke-width="10" stroke="#131313" fill="none" stroke-linecap="round"/>
	  </g>
	</svg>
</div>

<div id=ctr>
	<div class="panel-left">
	  <svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>        
	</div>

	<div class="splitter">
	</div>

	<div class="panel-right">
	  <svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>        
	</div>
</div>

&这里有一个相应的 jsfiddle 可以玩

注意：还有与设置preserveAspectRatio一起使用的viewBox属性。例如：preserveAspectRatio="xMidYMid meet"

于 2015-03-03T12:37:19.560 回答
1

您可以尝试使用flexbox。

简单的 HTML：

<div class="outside">
    <svg />
</div>

CSS：

.outside {
    display: flex;
    align-items: center; /* vertical alignment */
    justify-content: center; /* horizontal alignment */
}

HTML 与您的示例：

<div class="outside">
    <svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
            <g id="1" style="font-size: 0.7em;">
                <image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
            </g>
        </g>
    </svg> 
</div>
于 2019-08-13T22:27:10.413 回答
-2

我终于使用了一些 JS 代码来做到这一点。

我正在使用这里的解决方案：在页面上垂直和水平居中 <div> 的最佳方法？

这是：

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

}

但问题是，如果 SVG 大于窗口大小，它就会被裁剪。这是我用过的 JS 代码onLoad：

var heightDiff = window.innerHeight - svg.height.baseVal.value;
var widthDiff = window.innerWidth - svg.width.baseVal.value;
if (heightDiff > 0)                                                                                                                
    svg.style.marginTop = svg.style.marginBottom = heightDiff / 2;
if (widthDiff > 0)
    svg.style.marginLeft = svg.style.marginRight = widthDiff / 2;
于 2013-01-15T03:31:32.830 回答