居中的实现方法
在网页设计中，每当涉及到居中时，最重要的就是将元素及其父元素居中。听起来很简单，那你有没有考虑到很多的可能性呢?
水平垂直
已知宽高的元素
如果你同时知道一个元素的宽和高，并且要将元素相对其父元素垂直居中，那么使用绝对定位来实现或许是一种比较不错的办法。
.center{ width: 100px; height:100px; background: green; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
未知宽高的元素
但页面中很多元素都是未知宽高的。
基于绝对定位，进行扩展。
当我们在使用 translate( ) 变形函数计算百分比值时，是以这个元素自身的高度和宽度为基准来进行换算和移动的。因此，只要换用基于百分比的 CSS 变形来对元素进行偏移，就不需要在编译量中将元素的尺寸写死了。
.center{ background: green; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); }
基于table布局
CSS table 或许是个不错的选择。
因为 table 并不像常规块级元素一样渲染。比如说当元素宽 100% 时，table 只会占据其中实际内容的宽度，而默认的块级元素则会自动的占据父级元素的100%。
<table style="100%"> <tr> <td style="text-align: center; vertaical-align: center"> 我是垂直居中的！ </td> </tr> </table>
如果考虑到页面语义化，可以这么做
.something-semantic { display: table; width: 100%; } .something-else-semantic { display: table-cell; text-align: center; vertical-align: middle; }
基于 Flexbox 的解决方案
无疑是最佳的解决方案。因为 Flexbox 就是专门针对这类需求设计的😄
body{ display: flex; min-height: 100vh; margin: 0; } main{ margin: auto; }
当居中元素内部文本也需要居中时：
main{ display: flex; align-items: center; justify-content: center; width:18em; height: 10em; }
综上:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直水平居中</title> <style type="text/css"> .box{ width: 500px; height: 200px; background: #ccc; } .con{ width: 100px; height: 100px; background: #ddd; } /*一、使用position*/ /*.box{ position: relative; } .con{ position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }*/ /*二、position+margin*/ /*.box{ position: relative; } .con{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }*/ /*三、table-cell宽高可以随意变；可以把.con换成文字*/ /*.box{ display: table-cell; text-align: center; vertical-align: middle; } .con{ display: inline-block; }*/ /*四、position+transform*/ /*.box{ position: relative; } .con{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }*/ /*五、flex;align-items: center;justify-content: center，移动端首选*/ /*.box{ display: flex; align-items: center; justify-content: center; }*/ /*六、display:flex;margin:auto*/ /*.box{ display: flex; } .con{ margin: auto; }*/ </style> </head> <body> <div class="box"> <div class="con"></div> </div> </body> </html>
水平
1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
2) 若是块级元素, 该元素设置 margin:0 auto即可.
3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:
ul{ width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; margin: auto; }
4) 使用flex布局, 可以轻松的实现水平居中, 父元素设置如下:
.parent{ display: flex; justify-content: center; }
5) 使用flex 2009年版本, 父元素display: box;box-pack: center;如下设置:
.parent { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; display: box; box-orient: horizontal; box-pack: center; }
6) 使用CSS3中新增的transform属性, 子元素设置如下:
.son{ position:absolute; left:50%; transform:translate(-50%,0); }
7) 使用绝对定位方式, 以及负值的margin-left
8) 使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:
.son{ position:absolute; width:固定; left:0; right:0; margin:0 auto; }
垂直
1) 若元素是单行文本, 则可设置 line-height 等于父元素高度
2) 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.这是一种很流行的方法, 也适应IE7
.parent::after, .son{ display:inline-block; vertical-align:middle; } .parent::after{ content:''; height:100%; }
元素高度不定
3) 可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
优点：元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.
缺点：IE6~7, 甚至IE8 beta中无效.
4) 可用 Flex 2012版, 父元素做如下设置即可保证子元素垂直居中:
.parent { display: flex; align-items: center; }
优点：内容块的宽高任意, 优雅的溢出；可用于更复杂高级的布局技术中.
缺点：IE8/IE9不支持；需要浏览器厂商前缀；渲染上可能会有一些问题
5) 使用flex 2009版.
.parent { display: box; box-orient: vertical; box-pack: center; }
优点：实现简单, 扩展性强
缺点：兼容性差, 不支持IE
6) 可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:
.son{ position:absolute; top:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
优点：代码量少
缺点：IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.
元素高度固定
7) 设置父元素相对定位(position:relative), 子元素如下css样式:
.son{ position:absolute; top:50%; height:固定; margin-top:-0.5高度; }
优点：适用于所有浏览器.
缺点：父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条.
8) 设置父元素相对定位(position:relative), 子元素如下css样式:
.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }
优点：简单
缺点：没有足够空间时, 子元素会被截断, 但不会有滚动条.
参考：
