前言

布局中经常会遇到元素水平居中的需求,今天根据以前的学习笔记📒以及看过的一些技术博客做个元素水平居中的小结。

正文

图片的水平垂直居中

<div class="container">
    <img src="">//图片地址为http://static.jsbin.com/images/dave.min.svg
</div> 

.container{
    height:300px;
    width:300px;
    background:yellow;
    text-align:center;
    vertical-align:middle;
    display:table-cell; 
}
img{
    background-color: #333;
    height:230px;
    width:230px;
}

下面来一个使图片能在父元素中水平垂直居中,父元素也能水平居中的方法。
使用padding或margin填充

.container{
    margin: 80px auto;
    width: 300px;
    height: 300px;
    background-color: yellow;
}
img{
    width: 100px;
    height: 100px;
    padding: 100px; //margin:100px;也可以。
}

该方法是设置好img的长宽,然后和父容器之间长宽的差距用padding来弥补。效果见下图。

此方法是参考了大搜车前端博客中的一篇CSS布局的博文,作者是覃业博,原文是针对父div嵌套子div来到达水平垂直居中的目的,我这里div包裹的子元素img,和子元素是div的样式设置有些许不一样。

文字的水平垂直居中

<div class="container">
      文字水平居中
</div>

.container{
    line-height:300px;
    width:300px;
    line-height:300px;
    background:yellow;
    text-align:center;
    margin:0 auto;
}

利用float和元素设置偏移来水平垂直居中

先上代码:

<div class="super-element">  
  <div class="layout-helper">
    <div class="sub-element">呵呵呵呵呵呵呵呵呵呵呵呵<br>呵呵呵呵呵呵呵呵呵呵呵呵呵呵<br>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
  </div>
</div> 

.super-element{
    width: 100%;
    height: 400px;
    background-color: #ccc;
}

.layout-helper{
    float: left;
/*  display:inline-block; */    
    position: relative;
    background:pink;
    left: 50%;
    top: 50%;
}

.sub-element{
    position: relative;
    left: -50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color: #333;
    color: #fff;
}

效果图:

还有一种通过设置添加占位div和设置占位div的margin-bottom:-50%来使元素居中的方案,先上图:

<div class="super-element">  
  <div class="layout-helper"></div>
  <div class="sub-element"></div>
</div>  

.super-element{
    width: 400px;
    height: 400px;
    margin:0 auto;
    background-color:pink;
}
.layout-helper{
    width: 100%;
    height: 50%;
    margin-bottom:-50px;
}
.sub-element{
    position: relative;
    left: 50%;
    transform:translateX(-50%);
    width: 100px;
    height:100px;
    background-color:yellow;
}

效果图:

其思想就是在super-element中设置一个占super-element宽100%和高50%的div块,我这里命名layout-helper,然后设置它的margin-bottom为sub-element高度的一半,后面接着的sub-element就垂直居中了,然后再设置sub-element的position:relative;left:50%;transform:translateX(-50%);水平也居中了。这里有个注意点,super-element的高度需要确定,这样才能使layout-helper的heigh:50%有效,还有layout-helper的margin-bottom设置的负高度为sub-element高度的一半。这种水平垂直居中方式兼容性较好。

此外还有一种使用定位和margin-top＋margin-left为负子元素长宽来垂直水平居中的方法。上图:

 <div class="super-ele">
   <div class="sub-ele">
 </div>

.super-ele{
    position:relative;
    width:300px;
    height:300px;
    margin:100px auto;
    background:pink;
}

.sub-ele{
    position:absolute;
    width:100px;
    height:100px;
    background:yellow;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

这种方法也是要设置子元素长和宽并且在设置margin-top、margin-left的时候去匹配子元素长宽的一半。

结尾

元素水平居中的技巧还有很多,还有使用Flex的方法,今天先到这里,等我悟透了再慢慢填补文章,以上实例如有错误存在,欢迎各位及时指出。

参考:大搜车前端博客中的一篇CSS布局的博文