一个水平和垂直居中的模态弹框这么一个小需求，对于我们这些前端来说，应该是常事。

在css3出来以前，我们要想让元素既水平居中又要垂直居中只有一个办法（我能想到的），就是通过js计算，把它们定位到屏幕中间位置。这方法比较笨，也麻烦。

推荐下我的前端群：524262608，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

下面两种方式，可以让元素快速定位到屏幕中间。　

flex布局

1 <style> 
2 .flex-mask { 
3 display: flex; 
4 position: fixed; 
5 z-index: 1; 
6 top: 0; 
7 left: 0; 
8 bottom: 0; 
9 right: 0;
10 align-items: center;　　// 垂直居中
11 justify-content: center;　　// 水平居中
12 background: rgba(0,0,0,.5);
13 }
14 .flex-box {
15 width: 500px;
16 height: 300px;
17 background-color: #fff;
18 border-radius: 10px;
19 }
20 </style>
21 
22 <!-- 元素 -->
23 <div class="flex-mask">
24 <div class="flex-box"></div>
25 </div>

使用translate

SS居中是前端工程师经常要面对的问题，也是基本技能之一。

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。

今天，我们就和大家分享一些居中的常用方法。

把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。

使用line-height让单行文字垂直居中

把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。

使用display:table-cell

对于那些个不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，然后结合text-align:center;vertical-align:middle;来使元素居中。

利用css3的translate实现居中

css3里的移动属性也能实现元素的水平居中对齐。但是，一样注意的是只支持高版本浏览器。IE8及以下版本想都别想了。

弹性盒子实现垂直水平居中

弹性盒子也是css3新增的样式，完全解决了垂直布局难的问题。需要注意的是 ：一样要考虑浏览器的兼容性。

使用表格

如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align=”center” 以及 valign=”middle” 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。

如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效。

使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。

如果只想实现一个方向的居中，则可以只使用left , margin-left 来实现水平居中，使用top , margin-top来实现垂直居中。

终极定位元素居中

通过让内部定位的盒子left，right，top，bottom四个值同时为0，然后让margin的四个值自动平分空间，实现元素的垂直水平都居中对齐。一样要注意IE7及以下低版本浏览器的不配合问题。

以上所述是小编给大家介绍的CSS实现居中的几种方法，希望对大家有所帮助。