今天遇到的是
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; }转载于:https://www.cnblogs.com/Anne3/p/6844940.html