CSS实例

1.浮动、div内文字(水平局中、垂直居中)、超出隐藏出现滚动条

 <div class="dialog_cont">
          <div class="decisionReult">通过</div>
          <div class="decisionContent">
          行政管理部黄雄汇报了方案，会议形成决议如下：
          同意采用公开比选方式，技术分与报价分权重为55.0%:45.0%，商务分采用综合评分法，报价分采用服务类均值下拉法，下拉点为一次均值的93%，并围绕下拉点上下各波动2个百分点作为开标现场的随机抽取点范围。当报价高于随机抽取后确定的均值点80%，报价得0分。综合分第一中选。
          同意采用公开比选方式，技术分与报价分权重为55.0%:45.0%，商务分采用综合评分法，报价分采用服务类均值下拉法，下拉点为一次均值的93%，并围绕下拉点上下各波动2个百分点作为开标现场的随机抽取点范围。当报价高于随机抽取后确定的均值点80%，报价得0分。综合分第一中选。
          同意采用公开比选方式，技术分与报价分权重为55.0%:45.0%，商务分采用综合评分法，报价分采用服务类均值下拉法，下拉点为一次均值的93%，并围绕下拉点上下各波动2个百分点作为开标现场的随机抽取点范围。当报价高于随机抽取后确定的均值点80%，报价得0分。综合分第一中选。          </div>
          <div style="clear:both"></div>
        </div>

  .dialog_cont {
    background-color: #dbdbdb;
    margin-top: 20px;
    line-height: 30px;
    padding: 10px;
    position: relative;	//相对定位
    color: rgb(46, 46, 46);
    max-height: 340px; //设置最大高度
    overflow-y: auto; //超出则隐藏并出现滚动调
    .decisionReult{
      position: absolute; //绝对定位
      opacity: 0.4;
      font-size: 96px;
      letter-spacing: 20px;
      width: 100%;	//宽度与父元素一样
      text-align: center;	//水平居中
      height: 100%;	//高度与父元素一样
      margin-left: -10px;	//因为父元素设置了10px的padding
      margin-top: -10px;		//同上
      display: flex;	//垂直居中
      flex-direction: column;	//垂直居中
      justify-content: center;	//垂直居中
      }  
  }