v-center-inline | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
  <div class="v-center-inline-wrap">
  <div class="v-center-inline">
​
    <p>段落信息段落信息段落信息段落信息段落信段落信息段落段落信息段落段落信 息段落信息段落信息</p>
   <!-- <img src="https://sfault-image.b0.upaiyun.com/138/754/1387544687-59b78502d71e9" class="img" alt="" /> -->
   </div>
</div>
  
</body>
</html>

HTML

xxxxxxxxxx
 
*,div,p{margin: 0;padding: 0;}
html,body{
  height: 100%;
}
​
.v-center-inline-wrap{ 
   text-align: center;
   margin: 0 auto; 
   width: 100%;
   height: 100%; 
   background: #f00;
}
 .v-center-inline-wrap:after {  
  content: '';  
  display: inline-block;  
  vertical-align: middle;  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
  //width: 0.2em;
  background: #fff;
} 
.v-center-inline{
  display: inline-block;  
  vertical-align: middle;   
  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+ */  
  background: #0f9;
}

CSS