Html CSS按钮未正确对齐

我通过编辑“文森特·杜兰德的简单悬停效果”制作了这个按钮。但问题是我博客中的一些css是重叠的。所以它没有正确地对准中间。我找不到可能是哪一个。我试过用！在某些地方有重要的标签。但我想它没有成功。我需要知道我应该在哪里使用！在本代码中，将按钮与中间对齐很重要吗？或者我需要一个新的css元素来实现这一点

.btn保证金{
保证金上限：1.6雷姆；
框大小：继承；
文本对齐：居中；
}
.btn{
-webkit点击高！重要提示：透明；
边界半径：2px；
盒影：rgba（0,0,0,0.14）0 3px 3px 0，rgba（0,0,0,0.12）0 1px 7px 0，rgba（0,0,0,0.2）0 3px 1px-1px；
框大小：继承；
颜色：白色！重要；
光标：指针；
显示：内联块；
高度：自动；
字母间距：0.5px；
线高：42px；
指针事件：全部；
位置：相对位置；
文字装饰线：无；
垂直对齐：中间对齐；
字号：1.6em；
填充：0.2em；
过渡时间：800ms；
}
.btn绿色{
背景色：#1AAB8A；
}
.btn绿色：悬停{
背景色：#fff；
颜色：#1AAB8A！重要；
}
.btn:之前，.btn:之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
高度：2倍；
宽度：0；
过渡时间：400ms；
}
.btn:之后{
权利：继承；
顶部：继承；
左：0；
底部：0；
}
.btn绿色：之前，.btn绿色：之后{
背景：#1AAB8A；
}
.btn:悬停：之前.btn:悬停：之后{
宽度：100%；
过渡时间：800ms；
}

---

使用此CSS将按钮居中对齐

.btn-green {
  background-color: #1AAB8A;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.btn页边距{
保证金上限：1.6雷姆；
框大小：继承；
位置：相对位置；
左：50%；
转化：translateX（-50%）；
}
.btn{
-webkit点击高！重要提示：透明；
边界半径：2px；
盒影：rgba（0,0,0,0.14）0 3px 3px 0，rgba（0,0,0,0.12）0 1px 7px 0，rgba（0,0,0,0.2）0 3px 1px-1px；
框大小：继承；
颜色：白色！重要；
光标：指针；
显示：内联块；
高度：自动；
字母间距：0.5px；
线高：42px；
指针事件：全部；
位置：相对位置；
文字装饰线：无；
垂直对齐：中间对齐；
字号：1.6em；
填充：0.2em；
过渡时间：800ms；
}
.btn绿色{
背景色：#1AAB8A；
位置：相对位置；
左：50%；
转化：translateX（-50%）；
}
.btn绿色：悬停{
背景色：#fff；
颜色：#1AAB8A！重要；
}
.btn:之前，
.btn:之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
高度：2倍；
宽度：0；
过渡时间：400ms；
}
.btn:之后{
权利：继承；
顶部：继承；
左：0；
底部：0；
}
.btn格林：之前，
.btn格林：之后{
背景：#1AAB8A；
}
.btn:悬停：在，
.btn:悬停：之后{
宽度：100%；
过渡时间：800ms；
}
.btn绿色{}

---

将

*{框大小：边框框；}

添加到您的css中

*{框大小：边框框；}
.btn保证金{
保证金上限：1.6雷姆；
框大小：继承；
文本对齐：居中；
}
.btn{
-webkit点击高！重要提示：透明；
边界半径：2px；
盒影：rgba（0,0,0,0.14）0 3px 3px 0，rgba（0,0,0,0.12）0 1px 7px 0，rgba（0,0,0,0.2）0 3px 1px-1px；
框大小：继承；
颜色：白色！重要；
光标：指针；
显示：内联块；
高度：自动；
字母间距：0.5px；
线高：42px；
指针事件：全部；
位置：相对位置；
文字装饰线：无；
垂直对齐：中间对齐；
字号：1.6em；
填充：0.2em；
过渡时间：800ms；
}
.btn绿色{
背景色：#1AAB8A；
}
.btn绿色：悬停{
背景色：#fff；
颜色：#1AAB8A！重要；
}
.btn:之前，.btn:之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
高度：2倍；
宽度：0；
过渡时间：400ms；
}
.btn:之后{
权利：继承；
顶部：继承；
左：0；
底部：0；
}
.btn绿色：之前，.btn绿色：之后{
背景：#1AAB8A；
}
.btn:悬停：之前.btn:悬停：之后{
宽度：100%；
过渡时间：800ms；
}

.演示{
文本对齐：居中；
}
.btn保证金{
保证金上限：1.6雷姆；
框大小：继承；
文本对齐：居中；
}
.btn{
-webkit点击高！重要提示：透明；
边界半径：2px；
盒影：rgba（0,0,0,0.14）0 3px 3px 0，rgba（0,0,0,0.12）0 1px 7px 0，rgba（0,0,0,0.2）0 3px 1px-1px；
框大小：继承；
颜色：白色！重要；
光标：指针；
显示：内联块；
高度：自动；
字母间距：0.5px；
线高：42px；
指针事件：全部；
位置：相对位置；
文字装饰线：无；
垂直对齐：中间对齐；
字号：1.6em；
填充：0.2em；
过渡时间：800ms；
}
.btn绿色{
背景色：#1AAB8A；
}
.btn绿色：悬停{
背景色：#fff；
颜色：#1AAB8A！重要；
}
.btn:之前，.btn:之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
高度：2倍；
宽度：0；
过渡时间：400ms；
}
.btn:之后{
权利：继承；
顶部：继承；
左：0；
底部：0；
}
.btn绿色：之前，.btn绿色：之后{
背景：#1AAB8A；
}
.btn:悬停：之前.btn:悬停：之后{
宽度：100%；
过渡时间：800ms；
}

---

最后，问题在于评论：(

我在css中使用了html注释。这就是为什么会发生这种情况。感谢@CharuMaheshwari提到这一点。同时也感谢其他3个答案。所有答案都有效

通过@CharuMaheshwari help，这就是我决定使用的代码

/*Awesome按钮css Start*/
.btn保证金{
保证金上限：1.6雷姆；
框大小：继承；
文本对齐：居中；
}
.btn{
-webkit点击高！重要提示：透明；
边界半径：2px；
盒影：rgba（0,0,0,0.14）0 3px 3px 0，rgba（0,0,0,0.12）0 1px 7px 0，rgba（0,0,0,0.2）0 3px 1px-1px；
框大小：继承；
颜色：白色！重要；
光标：指针；
显示：内联块；
高度：自动；
字母间距：0.5px；
线高：42px；
指针事件：
add one parent div and set this div  text-align: center;