使用`position：static`将元素居中/填充/定位到父div的任何方法？

Question

我正在撰写Chrome扩展程序，该扩展程序会从网页中找到一些特定的div，并在每个div内添加一个按钮。

现在我想将我的按钮放在div的确切中心（垂直和水平），但这些div具有默认position: static（这意味着我可以＆＃39 ;如果我理解正确，则使用绝对定位。）

为了与其他扩展程序兼容，我不想修改原始元素的样式（例如设置这些position的{​​{1}}）。那么我可以定位我的按钮吗？

Answer 1

您可以将Flexbox添加到div吗？

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

否则，如果您只能修改按钮，请使用transform to center：

button {
    position: relative;
    top: 50%;
    left: 50%;          
    transform: translate(-50%, -50%); 
}