SVG在CSS中的垂直對齊

Question

嵌入式SVG對齊出現問題。 我創建了一個帶有一些文本和SVG的按鈕。 並且，當SVG至少與文本一樣大時，對齊方式可以正常工作，但是當SVG高度小於文本時，對齊將失敗。

我創建了一個帶有兩個彩色背景按鈕的測試用例，以指示確切的中間位置。 您可以查看一下是否仔細觀察第二種情況是否完美對齊，因為SVG的高度小於文本中的高度。

有沒有什么辦法解決這一問題？ 用其他方式做（請不要js）？

測試案例： https ： //goo.gl/KYDKGH

Answer 1

jsfiddle 1-您可以在容器上使用position:relative ，在這樣的對象上使用position:absolute ：

  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;

top: 50%將對象移至容器的垂直中心，並選擇對象的頂部作為參考（而不是其中心），因此transform: translateY將其向上移動其大小的50％，以使其完全位於中間容器的高度（通過對象中心）。

ps： text-align:center; left:0; right:0; 和margin:auto用於水平對齊。

jsfiddle 2-或在具有align-items的容器上使用display:flex以垂直對齊內容，如下所示：

  display: -webkit-flex; /* Safari */  
  display: flex;
  -webkit-align-items: center; /* Safari 7.0+ */
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;

ps： justify content用於水平對齊。