Question

我在移动网站上有一个简单的方形SVG艺术元素。如何在纵向模式和纵向中心onOrientationChange上水平居中？基本上完美的中心适合，无论方向和Safari-＆amp;铬友好？

垂直居中有诽谤。有没有一种简单有效的方法来实现这一目标？

Answer 1

考虑到您的浏览器要求（我认为您的意思是最新的），同时水平和垂直居中的最佳选择是 flexbox 。此外，这样您就不需要检查方向，因为SVG将保持居中。

关于flexbox的不同属性的css-tricks有一个方便的指南：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

以下是使用flexbox演示可能解决方案的一些代码：

body {
  margin: 0; /* remove margin added by "user agent stylesheet" */

  /* Make sure the body takes up the whole screen */
  /* (unless we cannot center vertically) */
  width: 100vw;
  height: 100vh;
  
  /* Center SVG with flexbox. */
  display: flex;
  justify-content: center;
  align-items: center;
}

<svg viewBox="0 0 400 400" widht="100px" height="100px">
  <rect x="0" y="0" width="400" height="400" fill="red" />
  <path d="M 200 100 L 300 300 L 100 300 z" fill="yellow" />
</svg>

中心方形SVG是横向还是纵向？

1 个答案: