今天遇到的是

1
2
3
4
5
6
7
<div class="con">
 
    <img src="">
 
    <div  class="center">居中内容</div>
 
</div>

　　

父级被图片撑开，为了自适应不能设置高度。子级居中内容在图片上面，为了保证图片始终完全展示,不能作为背景图片，因此只有使用绝对定位使元素脱离文档。

因为子级没有高度和宽度所以：

 
.center{
   position:absolute;

   top:50%;

   left:50%;

   margin-top:-50%;

   margin-left:-50%;

 
1
2
3
4
5
6
7
8
.center{
       position: absolute;
       top:50%;
       left:50%;
       width:100%;
       transform:translate(-50%,-50%);
       text-align: center;
}

　　上面的方法不能使用

    translate方法可以使用，但是会使子元素宽度缩小50%，影响里面的段落显示。

想到在center外再添加一个父级,center-con用来定位脱离文档流，再想办法使center居中

1
2
3
4
5
6
7
8
<div class="con">
 
    <img src="">
   <div  class="center-con"> 
          <div  class="center">居中内容</div>
   </div>
  
</div>

　　

网上百度了垂直居中的办法

方法1：table-cell

1
.center
1
{ <br>  display: table-cell;<br>  vertical-align: middle; <br>  text-align: center;<br> }

　　这个方法使用最多，但center-con设置了display:table;后不管是height:100%;还是绝对定位，top:0;left:0;bottom:0;right:0;都不能使center-con的高度和父级con的高度一致，没办法实现垂直居中。

最后方法：

display:flex

1
2
3
4
5
.center-con{
    display: flex;
    justify-content:center;
    align-items:Center;
}