Html 垂直居中SVG标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14315331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically center SVG Tag
提问by Cuva
I'm trying to figure out a way to center vertically my SVG Tag.
我试图找出一种方法来垂直居中我的 SVG 标签。
Basically, here is a simplified SVG code i'm trying to center :
基本上，这是我试图居中的简化 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>
I have no trouble putting it in the middle (horizontally speaking) of the page, however i'd like it to be vertically centered as well.
我可以毫不费力地将它放在页面的中间（横向而言），但是我也希望它垂直居中。
I can add wrappers, but i'd like to know a generic way of doing this, not depending on the SVG size nor the window size.
我可以添加包装器，但我想知道这样做的通用方法，不依赖于 SVG 大小或窗口大小。
I have tried multiple ways, but nothing worked.
我尝试了多种方法，但没有任何效果。
Thanks,
谢谢，
采纳答案by Cuva
I've finally used some JS code to do so.
我终于使用了一些 JS 代码来做到这一点。
I was using the solution from here : Best way to center a <div> on a page vertically and horizontally?
我正在使用这里的解决方案：将 <div> 垂直和水平放置在页面上的最佳方法？
Which is :
这是：
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
But the problem is that if the SVG is bigger than the window size, it gets cropped.
Here is the JS code i've used in onLoad:
但问题是，如果 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;
回答by Maciej Paprocki
I updated this answer as current browser have a lot better solution for that.
我更新了这个答案，因为当前的浏览器有更好的解决方案。
How wise man said, first year you learn html and css, for another few years you learn advanced javascript and after five years you finally learn how to vertically center div.
聪明人说，第一年你学习html和css，再过几年你学习高级javascript，五年后你终于学会了如何垂直居中div。
to vertically/horizontally align anything in css you can use that.
要垂直/水平对齐 css 中的任何内容，您可以使用它。
<div class="outside">
<div class="inside">Whatever</div>
</div>
and css:
和CSS：
.outside{
position:relative;
}
.inside{
position:absolute;
top:50%;
bottom:50%;
transform:translate(-50%, -50%);
}
the only issue with that is that element doesn't generate the height.
唯一的问题是该元素不会生成高度。
Old answer:
旧答案：
you have height and width so u can use margin : auto auto;
你有高度和宽度，所以你可以使用 margin : auto auto;
or put it in div with
或者把它放在 div 中
position:absolute ;
left:50% ;
margin-left: -(half of width of image)px;
top:50% ;
margin-top: -(half of height of image)px;
the second one will be better if u will be doing some stuff with it (javascript animation or something)
如果你会用它做一些事情（javascript动画或其他东西），第二个会更好
I didn't check it but maybe u can use second option for svg (without outer div) too
我没有检查它，但也许你也可以为 svg 使用第二个选项（没有外部 div）
回答by Mohit Mohan
It's Simple!
这很简单！
HTML:
HTML：
<div class="a">
<div class="b">
<div class="c">
<!-- Your SVG Here -->
</div>
</div>
</div>
CSS:
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>
回答by gilalberto
You could try using flexbox.
您可以尝试使用flexbox。
Simple HTML:
简单的 HTML：
<div class="outside">
<svg />
</div>
CSS:
CSS：
.outside {
display: flex;
align-items: center; /* vertical alignment */
justify-content: center; /* horizontal alignment */
}
HTML with your sample:
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>
- Flexbox browser support: caniuse flexbox
- Learn about Flexbox: CSS Tricks Guide to Flexbox
- Learn by playing: Flexbox Froggy
- Flexbox 浏览器支持：caniuse flexbox
- 了解 Flexbox：Flexbox 的CSS 技巧指南
- 边玩边学：Flexbox Froggy
回答by violet313
If you provide your svgelement with a viewBoxattribute and set it's width& heightattributes to 100%then all should be well (in most browsers..)
如果你为你的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>&here's a corresponding jsfiddle to play with
NB: there is also the preserveAspectRatioattribute that works in conjunction with the viewBoxsettings. eg: preserveAspectRatio="xMidYMid meet"
注意：还有preserveAspectRatio与viewBox设置一起工作的属性。例如：preserveAspectRatio="xMidYMid meet"
