元素水平垂直居中方法集锦

风动之石

于 2014-12-12 10:01:07 发布

阅读量632

点赞数

分类专栏： CSS 专题文章标签：垂直居中水平居中

CSS 专题专栏收录该内容

13 篇文章 0 订阅

订阅专栏

绝对定位元素的水平垂直居中

参考自：

小tip: margin:auto实现绝对定位元素的水平垂直居中 http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/

如何只用CSS做到完全居中 http://blog.jobbole.com/46574/

方法一：负margin值

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

好处：

浏览器兼容性非常好，甚至支持IE6-7

不足：

这是个非响应式的方法，不能使用百分比的大小，也不能设置min-/max-的最大值最小值。
需要提前知道元素的尺寸，否则margin负值的调整无法精确，此时，往往要借助JS获得。
内容可能会超出容器
需要为padding预留空间，或者需要使用box-sizing: border-box样式。

方法二：CSS3，transform translate偏移

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

transform中translate偏移的百分比值是相对于自身大小的。于是乎，无论绝对定位元素的尺寸是多少，其都是水平垂直居中显示的。

好处：

内容高度可变

不足：

不支持IE8
需要写厂商前缀
会和其他transform样式有冲突
某些情况下的边缘和字体渲染会有问题

方法三：margin:auto实现绝对定位元素的居中

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。

前提条件：元素设置有宽高，或隐性有宽高（如图片自身包括尺寸）

原理： top、right、bottom、left 属性都是指外边距边界距离父元素内边距边界的距离。当宽度固定时，设置 left: 0; right: 0; margin: auto; 可以让左右外边距自适应，使之让元素的宽度 + 元素的左右外边距 + 元素的左右边框 + 元素的左右内边距 = 父元素的宽度。

方法四：table-cell法、position:absolute/relative

支持 table-cell 方法的浏览器使用 table-cell

不支持的 IE 6/7 ，使用 position:absolute 和 position: relative

<div class="m-demo g-BothCtr-4">
    <div class="tableCell">
        <div class="cnt">content</div>
    </div>
</div>

.m-demo {
    height: 300px; /*高度值不能少*/
    width: 300px; /*宽度值不能少*/
    border: 1px solid #000000;
}
.g-BothCtr-4 {
    display: table;
    position: relative;
    float: left; /*可不浮动，也可浮动*/
}
.g-BothCtr-4 .tableCell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *position: absolute;
    *top: 50%;
    *left: 50%;
}
.g-BothCtr-4 .cnt {
    vertical-align: center;
    display: inline-block;
    *position: relative;
    *top: -50%;
    *left: -50%;
}
/*需要注意的是，使用这种方法，如果你的居中元素是放在body中的话，你需要给html,body设置一个“height:100%”的属性。*/

方法五：inline-block法

迫切需要的方法：inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然，内容区域会被推到顶端，这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小！
如果内容块需要尽可能大地占用水平空间，可以为大容器加上max-width: 99%;样式，或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% – 0.25em) 样式。
这种方法和table-cell的大多数好处相同，不过最初我放弃了这个方法，因为它更像是hack。不管这一点的话，浏览器支持很不错，而且也被证实是很流行的方法。

<div class="Center-Container is-Inline">
    <div class="Center-Block">
    	<!-- CONTENT -->
    </div>
</div>

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}
 
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}
 
.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}
 
.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

好处：

内容高度可变
内容溢出则能自动撑开父元素高度
浏览器兼容性好，甚至可以调整支持IE7

不足：

需要额外容器
依赖于margin-left: -0.25em的样式，做到水平居中，需要为不同的字体大小作调整
内容区声明的宽度不能大于容器的100% 减去0.25em的宽度

方法六：Flexbox法（有待学习）

CSS未来发展的方向就是采用Flexbox这种设计，解决像垂直居中这种共同的问题。请注意，Flexbox有不止一种办法居中，他也可以用来分栏，并解决奇奇怪怪的布局问题。

.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

好处：

内容可以是任意高宽，溢出也能表现良好
可以用于各种高级布局技巧

不足：

不支持IE8-9
需要在body上写样式，或者需要额外容器
需要各种厂商前缀兼容现代浏览器
可能有潜在的性能问题

方法七：CSS3 calc()函数

html,body{
    width: 100%;
    height: 100%;
}

.m-demo{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

.m-demo > div{
    position: absolute;
    left: calc(50% - 15%);/*50%和15%都是相对于父元素的，所以意思就是先过去50%，再拉回来15%，而这个15%又刚好是父元素宽度一半*/
    top: calc(50% - 15%);/*原理同上*/
    width: 30%;
    height: 30%;
    background-color: #FF0000;
}
/*.m-demo > div{
    position: absolute;//这种固定宽高的也是可以用calc计算的，原理同上
    left: calc(50% - 400px /2);
    top: calc(50% - 400px / 2);
    width: 400px;
    height: 400px;
    background-color: #FF0000;
}*/

<div class="m-demo">
    <div></div>
</div>

兼容性：兼容性差，只有最新浏览器才支持
扩展性：高宽不可扩展

方法八：使用 table 标签

<!doctype html>
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>  
    <title>CSS垂直居中</title>  
    <style type="text/css">  
      .container{  
        width:500px;/*装饰*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
      
    </style>  
  </head>  
  <body>  
    <h1>垂直居中（table）</h1>  
    <div class='container'>
        <table width="100%" height="100%">
            <tr>
               <td align="center" valign="middle">
                  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
               </td>
           </tr>
       </table> 
   </div>
    
  </body>  
</html>

方法九：图片垂直居中（图片作为背景图片，设置background-position: center）

<div class="container"></div>

.container {
    width:500px;
    height:500px;
    line-height:500px;
    background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg)  no-repeat center center;
    border:1px solid #f00;
    text-align: center;
}

方法十：CSS 表达式

<div class="container">  
    <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />  
</div>

.container{  
    /*IE8与标准游览器垂直对齐*/
    display: table-cell;
    vertical-align:middle; 
    width:500px;/*装饰*/
    height:500px;  
    background:#B9D6FF;  
    border: 1px solid #CCC;  
}  
.container img{  
    display:block;/*让其具备盒子模型*/
    margin:0 auto;  
    text-align:center;
    margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
}

方法十一：使用 button 标签

<button><img src="http://placehold.it/200x200" /></button>

button {
    width: 400px;
    height: 400px;
    background: none;
    border: 1px solid #ccc;
}

方法十二：淘宝经典方法--height : line-height = 1.14

<div class="box">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

.box {
    /*非IE的主流浏览器识别的垂直居中的方法*/
    display: table-cell;
    vertical-align:middle;

    /*设置水平居中*/
    text-align:center;

    /* 针对IE的Hack
     * 我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。
     * 根据我们的计算，高度/字体大小的比值为1.14左右时IE可实现垂直居中。
     */
    *display: block;
    *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
    *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

    width:200px;
    height:200px;
    border: 1px solid #eee;
}
.box img {
    /*设置图片垂直居中*/
    vertical-align:middle;
}

风动之石

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素水平垂直居中方法集锦

绝对定位元素的水平垂直居中参考自：http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/方法一：负margin值.ele
复制链接

扫一扫