Html 需要帮助居中文本并与背景色重叠吗

我的主页文本（标签）无法居中。我不知道为什么它不起作用

我有一个按钮，当用户将鼠标悬停在按钮上时，它会执行一个简短的动画。按钮本应填充红色，但当我更改#主容器的背景色时，按钮将失去动画效果。我假设它隐藏在main的背景色后面，但我不知道如何解决这个问题

谢谢

/*CSS文档*/
/*注:
hashtag表示ID，而dots（.）表示类
例如，如果您执行#nav.selected，它将在nav ID中查找.selected。
*/
/*为按钮动画导入内容*/
@导入url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@导入url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*全局按钮Syles*/
a、 动画按钮：链接，a。动画按钮：已访问{
位置：相对位置；
显示：块；
利润率：30px自动0；
填充：14px 15px；
颜色：#fff；
字体大小：14px；
字体大小：粗体；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
溢出：隐藏；
字母间距：.08em；
边界半径：0；
文本阴影：01pxRGBA（0,0,0,0.2），01px0RGBA（0,0,0,0.2）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
a、 动画按钮：链接：之后，a.动画按钮：访问：之后{
内容：“；
位置：绝对位置；
身高：0%；
左：50%；
最高：50%；
宽度：150%；
z指数：-1；
-webkit转换：所有0.75秒到0秒；
-moz转换：所有0.75秒都是0秒；
-o型过渡：所有0.75秒缓解0秒；
过渡：所有0.75秒到0秒；
}
a、 动画按钮：链接：悬停，a。动画按钮：已访问：悬停{
颜色：#FFF；
文本阴影：无；
}
a、 动画按钮：链接：悬停：之后，a.动画按钮：已访问：悬停：之后{
身高：450%；
}
a、 动画按钮：链接，a。动画按钮：已访问{
位置：相对位置；
显示：块；
利润率：30px自动0；
填充：14px 15px；
颜色：#fff；
字体大小：14px；
边界半径：0；
字体大小：粗体；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
溢出：隐藏；
字母间距：.08em；
文本阴影：01pxRGBA（0,0,0,0.2），01px0RGBA（0,0,0,0.2）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
/*结束全局按钮样式*/
/*维多利亚纽扣款式3*/
a、 动画按钮，维多利亚三号{
边框：2px实心#D24D57；
颜色：#333；
}
a、 动画按钮。维多利亚三号：之后{
背景：#D24D57；
不透明度：.5；
-moz变换：translateX（-50%）translateY（-50%）；
-ms转换：translateX（-50%）translateY（-50%）；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
}
a、 动画按钮。维多利亚三号：悬停：后{
身高：140%；
不透明度：1；
}
身体{
背景色：#EEEEEE；
字体系列：“蒙特塞拉特”，无衬线；
}
a{
文字装饰：无；
颜色：#D24D57；
}
h1{
填充：10px；
对齐：左；
}
.光剑{
对齐：底部；
保证金：5px；
}
氢{
对齐：居中；
}
#容器{
宽度：自动；
左边距：0px；
右边距：自动；
}
#标题{
背景色：#D24D57；
颜色：白色；
填充：10px；
}
#内容{
填充：10px 10px 10px 10px；/*右上-左下*/
宽度：自动；
}
#导航{
宽度：自动；
高度：自动；
背景色：#999；
}
#导航ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
#李海军{
浮动：左；
}
#李娜{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李娜：停下来{
背景色：#111；
}
#导航选择{
字体大小：粗体；
}
#主要{
宽度：自动；
高度：2000px；
浮动：中心；
背景色：#999；
}
#main.profile_图片{
边界半径：20px；
宽度：250px；
高度：350px；
填充：10px；
浮动：对；
背景色：#333；
}
#页脚{
清除：两者；/*让我们跳过所有浮动元素，然后显示页脚*/
填充：10px；
背景色：#999；
颜色：白色；
文本对齐：居中；
}

西蒙·什里斯塔
西蒙·什里斯塔





主页

沙辛'

版权及副本；2017年西蒙·什里斯塔

更改z索引有效

/*CSS文档*/
/*注:
hashtag表示ID，而dots（.）表示类
例如，如果您执行#nav.selected，它将在nav ID中查找.selected。
*/
/*为按钮动画导入内容*/
@导入url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@导入url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*全局按钮Syles*/
a、 动画按钮：链接，a。动画按钮：已访问{
位置：相对位置；
显示：块；
利润率：30px自动0；
填充：14px 15px；
颜色：#fff；
字体大小：14px；
字体大小：粗体；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
溢出：隐藏；
字母间距：.08em；
边界半径：0；
文本阴影：01pxRGBA（0,0,0,0.2），01px0RGBA（0,0,0,0.2）；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
a、 动画按钮：链接：之后，a.动画按钮：访问：之后{
内容：“；
位置：绝对位置；
身高：0%；
左：50%；
最高：50%；
宽度：150%；
z指数：-1；
-webkit转换：所有0.75秒到0秒；
-moz转换：所有0.75秒都是0秒；
-o型过渡：所有0.75秒缓解0秒；
过渡：所有0.75秒到0秒；
}
a、 动画按钮：链接：悬停，a。动画按钮：已访问：悬停{
颜色：#FFF；
文本阴影：无；
}
a、 动画按钮：链接：悬停：之后，a。动画按钮：访问：悬停：尾部