css | 您所在的位置:网站首页 › css的居中标签 › css |
我正在尝试找出一种使我的 SVG 标签垂直居中的方法。 基本上,这是我试图居中的简化 SVG 代码: 我可以毫不费力地将它放在页面的中间(水平方向),但我也希望它垂直居中。 我可以添加包装器,但我想知道执行此操作的通用方法,而不取决于 SVG 大小或窗口大小。 我尝试了多种方法,但没有任何效果。 谢谢, 最佳答案 我更新了这个答案,因为当前的浏览器对此有更好的解决方案。 聪明人怎么说,第一年学html和css,再学几年高级javascript,五年后终于学会垂直居中div。 要垂直/水平对齐 css 中的任何内容,您可以使用两种主要方式: 绝对 Whatever和CSS: .outside{ position:relative; } .inside{ position:absolute; top:50%; bottom:50%; transform:translate(-50%, -50%); }唯一的问题是元素不会生成高度。 flexbox Flexbox 现在有很好的支持所以为什么不使用它。 https://caniuse.com/#feat=flexbox 使用 flexbox 你的元素不需要是绝对的,所以它会生成高度。代码: Whatever和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) 关于css - 垂直居中的 SVG 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14315331/ |
CopyRight 2018-2019 实验室设备网 版权所有 |