实现水平居中最简单的方式是将元素的margin-left和margin-right设置为auto，然后将它的宽度设置为一个具体的值，比如800像素。这样就可以将元素水平居中了。
但是，大家要实现的是水平锤子居中，也就是动态计算元素的宽度，并让它始终保持水平居中的位置。
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}上面的代码片段就是实现水平锤子居中的方法。首先，大家将元素的position属性设置为absolute，这样它就可以脱离文档流，后面的transform才能发挥作用。接着，大家将元素的top属性设置为50%，这意味着它的顶部距离视口的上沿是50%的距离。然后，大家将元素的左侧设置为50%，也就是让它距离视口左侧的距离是50%。最后，大家使用CSS3的transform属性和translate函数，将元素在水平和垂直方向上都向左上方移动50%的宽度和高度。这样就可以使元素始终在屏幕的垂直和水平方向上保持居中的位置。