センタースクエアSVGは、横向きまたは縦向きのいずれかになりますか？

Question

私はモバイルウェブサイト上に単純な正方形のSVGアート要素を持っています。ポートレートモードでこれを水平に中央に配置し、次に垂直中心にonOrientationChangeを配置するにはどうすればよいですか？オリエンテーションとサファリに関係なく基本的に完璧なフィット感 - &クロムに優しい？

垂直センタリングには奇異があります。これを達成するための簡単で効果的な方法はありますか？

Answer 1

ブラウザの要件（最近のものを意味すると思います）を考慮すると、水平方向と垂直方向の両方を同時にセンタリングする最適なオプションはフレックスボックスです。また、この方法では、SVGが中央に置かれているため、向きを確認する必要はありません。

は、フレックスボックスの異なる特性についてのCSSトリックの便利なガイドがあります：
https://css-tricks.com/snippets/css/a-guide-to-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>