一般我们的网页元素都是居中的，这也是大屏设备最合适的布局，而小屏设备一般都是全屏显示，响应式布局，于是问题就来了。如何有效设置元素水平居中，实现兼容所有显示屏设备？
块外边缘的自动居中
当我们将元素的左边缘和右边缘之间的边距设置为Auto时，元素将自动居中，但该属性仅适用于块元素，对行内元素没有影响。网页的一般布局基本都是这样设置的，兼容性很好，几乎所有浏览器都支持。
在实践中，我们可以创建一个Class类，作为这些需要居中的元素的容器。需要注意的是，必须指定容器的宽度。
https://baijiahao.baidu.com/# container { margin-left:auto；右边距:自动；宽度:980px}
在大多数主流浏览器中，这种方法非常有效，即使是Windows平台上的IE6也能以其标准或兼容模式正常显示。如果IE6以下的浏览器是无效的，但是现在谁还在用IE6以下的浏览器？
注意:如果我们的内容比显示屏宽，那么这个方法将会失败。
虽然支持不尽如人意，但大多数设计师建议尽量使用这种方式。这种方法也被认为是用CSS实现元素水平居中的各种方法中最正确、最合理、最简单的方法。
内联元素文本对齐文本居中。
文本对齐的属性很神奇。虽然它的字面意思是文本居中，但它对几乎所有的行内元素都有效，块元素的display:inline和display:inline-block也有效。该属性设置在父元素中，是子元素的中心属性。它兼容大多数浏览器，所以在某些情况下自然是必要的。
捐赠本网站
其实上面的列表可以不用列表，只要用一个DIV然后在里面加一个A标签，并为DIV设置文本中心即可。代码量少了也比较合理，但是有时候我们不得不使用UL列表，所以可以考虑上面的方法。
边距负边距+位置绝对定位
以上两种对中方法都有缺点。第一个是当元素大于屏幕宽度时，居中会失败，会出现滚动条，因为我们要设置宽度。第二个是内联元素，当父元素的宽度大于屏幕宽度时，我们的子元素会自动换行，这似乎可以理解。
有一个方法。无论元素的宽度和屏幕的宽度如何变化，元素总是在页面的中央。但是，当屏幕很小时，内容会被遮挡。兼容大屏的话可以试试这个方法。
负外缘的解决方法远不是简单的给元素加上负外缘。这种方法需要同时使用绝对定位和负外缘技巧，代码量比较大，但是兼容性比较好。
以下是该方案的具体实现方法。首先，创建一个包含需要居中的元素的容器，并设置高度。因为使用了绝对定位，所以无法显示高度。
然后在里面添加一个DIV容器，并将其放置在相对于页面左边缘绝对50%的位置。这样，容器的左外边缘将从页面宽度的50%的位置开始计数。最后，添加一个DIV内容容器，并将该容器的左外边缘的值设置为容器宽度的负一半。这样，容器可以固定在页面水平方向的中点。完整的代码如下。
虽然这不是首选的解决方案，但也是一个很好的方法，而且适用性很广，几乎可以兼容所有的浏览器。目前淘宝和京东。COM的大屏幕幻灯片放映布局也采用这种方式，也可以兼容内容比屏幕宽的情况。
所以如果你想获得最广泛的浏览器支持，那么这种方法将是最好的选择。
