中心CSS内容：“”;在<按钮> </button>内

Question

我正在尝试垂直和水平居中content: "+";。我已经能够使用行高实现这一目标。 不过在水平方面，我尝试使用绝对定位然后减去边距。但是没有用......

这就是我所拥有的：

html body div.body-container form div#composite-field button#fes-submit {
 position: absolute; float: none; clear: both; top: 0; right: 5%;
 width: 80px; height: 100px; margin: 0; padding: 0; font-size: 42px;

 border: 0; border-radius: 0; outline: none; -webkit-appearance: none;
 background-color: #2e4856; color: #eab94e;
 z-index: 20;
}

html body div.body-container form div#composite-field button#fes-submit:before {        
 content: "+"; line-height: 100px; float: left;
 font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 42px; letter-spacing: normal;
}

有什么想法吗？

Answer 1

如果使用绝对定位，最好使用文字尺寸属性，例如top，bottom，left，right，而不是使用边距。使用浮动也可能会反击你想要的定位，所以尝试删除它。另一种选择可能是向左或向右添加负边距。

Answer 2

解决了！

content:"+";
line-height: 100px;
display: block;
margin: 0 auto;

垂直使用line-height:;和横向display: block;，margin: 0 auto;。