Html div 容器中的垂直居中 svg
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39420338/
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
vertical center svg in div container
提问by darkomen
Can you help me to understand why my svg refuse to resize the height for helping me to center vertically in a div container ?
你能帮我理解为什么我的 svg 拒绝调整高度以帮助我在 div 容器中垂直居中吗？
How can I process for align vertical svg in a container ? I seem to svg behaviour is not standard like div...
如何处理在容器中对齐垂直 svg？我似乎 svg 行为不像 div 那样标准...
The main idea is that center horizontally AND vertically svg into a div.
主要思想是水平和垂直居中 svg 成一个 div。
I try this : https://jsfiddle.net/gbz7rp7u/1/#&togetherjs=0n9iL62pHv
我试试这个：https: //jsfiddle.net/gbz7rp7u/1/#&togetherjs=0n9iL62pHv
<div id="svg-container">
<svg id="svg-1" height="50%" width="50%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle r="15" cx="350" cy="80"></circle>
</svg>
</div>
#svg-container
{
background-color: red;
}
#svg-1
{
margin: auto auto;
display: block;
height: 30%;
}
回答by Mehrad
html, body {
height: 100%;
}
#svg-container
{
display: flex;
align-items: center;
background-color: red;
height: 100%;
}
#svg-1
{
margin: 0 auto;
display: block;
}<div id="svg-container">
<svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle r="15" cx="15" cy="15"></circle>
</svg>
</div>回答by Anton Novik
html, body {
height: 100%;
}
#svg-container {
background-color: red;
height: 100%;
}
#svg-1 {
display: block;
margin: auto;
height: 100%;
}<div id="svg-container">
<svg id="svg-1" height="15px" width="15px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle r="15" cx="15" cy="15"></circle>
</svg>
</div>