Html 搜索框CSS编辑。滑动误差

我正在学习CSS。我在编辑CSS搜索框时遇到问题。基本上，当我点击放大镜时，向左形成幻灯片。我希望它必须在中间，并且应该在两个方向上均匀滑动

@导入url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@导入url(https://raw.github.com/FortAwesome/Font-     Awesome/master/docs/assets/css/font-Awesome.min.css）；
身体{
背景：DDD；
字体大小：15px；
}
#包裹{
利润率：50px 100px；
显示：内联块；
位置：相对位置；
高度：60px；
浮动：对；
填充：0；
位置：相对位置；
}
输入[type=“text”]{
高度：60px；
字体大小：55px；
显示：内联块；
字体系列：“Lato”；
字号：100；
边界：无；
大纲：无；
颜色：#555；
填充：3倍；
右边填充：60px；
宽度：0px；
位置：绝对位置；
排名：0；
右：0；
背景：无；
z指数：3；
过渡：宽度.4s立方贝塞尔（0.000,0.795,0.000,1.000）；
光标：指针；
}
输入[type=“text”]：焦点：悬停{
边框底部：1px实心#BBB；
}
输入[type=“text”]：焦点{
宽度：700px；
z指数：1；
边框底部：1px实心#BBB；
光标：文本；
}
输入[type=“submit”]{
高度：67px；
宽度：63px；
显示：内联块；
颜色：红色；
浮动：对；
背景：url数据：数据：图像/png；Bas64，IVBorW0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 JxFLDVIIOBNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/HopielowfizucD1radoqa75oqvkCt+ODHNQpqpQCitwajWgWgWgWgBkZrVbCcYPgUgWgBx/L0cmxN40U6WCIj1OzWyDFFP3AXQoYVdKxiH9FKrFKrHwKrHwKrHwKrHgZyKwKwKwKwKwKwKwKwKwKwKwKwKwKwKvZhKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKv中心不重复；
文本缩进：-10000px；
边界：无；
位置：绝对位置；
排名：0；
右：0；
z指数：2；
光标：指针；
不透明度：0.4；
光标：指针；
过渡：不透明；
}
输入[type=“submit”]：悬停{
不透明度：0.8；
}

试试这个

不要使用

位置：绝对；

进行输入

@导入url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@导入url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
身体{
背景：DDD；
字体大小：15px；
文本对齐：居中；
}
#包装形式{
边缘顶部：50px；
位置：相对位置；
高度：60px；
}
输入[type=“text”]{
高度：60px；
字体大小：55px；
字体系列：“Lato”；
字号：100；
边界：无；
大纲：无；
颜色：#555；
填充：3倍；
右边填充：60px；
宽度：0px；
背景：无；
过渡：宽度.4s立方贝塞尔（0.000,0.795,0.000,1.000）；
光标：指针；
}
输入[type=“text”]：焦点：悬停{
边框底部：1px实心#BBB；
}
输入[type=“text”]：焦点{
位置：相对位置；
宽度：500px；
z指数：-2；
边框底部：1px实心#BBB；
光标：文本；
}
输入[type=“search”]{
位置：相对位置；
z指数：-1；
高度：67px；
宽度：63px；
左边距：-60px；
转换：translateY（-15px）；
颜色：红色；
背景：url数据：数据：图像/png；Bas64，IVBorW0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 JxFLDVIIOBNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/HopielowfizucD1radoqa75oqvkCt+ODHNQpqpQCitwajWgWgWgWgBkZrVbCcYPgUgWgBx/L0cmxN40U6WCIj1OzWyDFFP3AXQoYVdKxiH9FKrFKrHwKrHwKrHwKrHgZyKwKwKwKwKwKwKwKwKwKwKwKwKwKwKvZhKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKvKv中心不重复；
文本缩进：-10000px；
边界：无；
光标：指针；
不透明度：0.4；
过渡：不透明；
}
输入[type=“submit”]：悬停{
不透明度：0.8；
}

请在您的问题中输入您的代码，以便我们查看。@Ayan先生，完成。