我在DIV中有一個SVG元素和一個BUTTON元素。在Button中，它垂直和水平居中對齊，在DIV中，它頂部和左側對齊。

我檢查了這兩個元素，但是沒有發現是什么讓SVG在按鈕中間對齊。用戶代理樣式表中一定有什么東西，但是我找不到。

下面是代碼和演示:

http://jsfiddle.net/eoyx659n/

<button>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M21.99 4c0-1.1-.89-2-1.99-2h-16c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path>
        <path d="M0 0h24v24h-24z" fill="none"></path>
    </svg>
</button> 
 <div>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M21.99 4c0-1.1-.89-2-1.99-2h-16c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path>
        <path d="M0 0h24v24h-24z" fill="none"></path>
    </svg>
</div>

button, div {
    padding: 0;
    margin: 8px;
    width: 44px;
    height: 44px;
    border: 1px solid;
    background-color: transparent;
}

button svg, div svg {
    padding: 0;
    margin: 0;
}

如果您在瀏覽器的開發工具中檢查按鈕，您將能夠看到用戶代理CSS規則，默認情況下瀏覽器將這些規則應用于button之類的元素(您可能需要啟用此選項)。例如，在Chrome中，你會在& ltbutton & gt。然而，由于一個元素在另一個元素內垂直居中是不能用標準的CSS魔術盒來完成的，所以你找不到任何屬性來做這件事。這是瀏覽器為按鈕做的一件特別的事情。

有一些技巧可以讓你做到，比如使用display:table-cell；但是，在您的情況下，最簡單的解決方案是讓SVG引擎為您完成這項工作。只需使用text-align: center進行水平居中，并將SVG高度設置為& ltdiv & gt高度，SVG引擎會完成剩下的工作。

button, div {
    ...
    text-align: center;
}

div svg {
    height: 44px;
}

在這里演示