标记(适用于所有方法)：

<div class="block">    
    <div class="centered">
        Some text
    </div>    
</div>

解决方案#1：CSS表方法(FIDDLE)

CSS：

/* This parent can be any width and height */
.block {
  display: table;
   width: 100%;
   background: orange;
   height: 300px;
}


.centered {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   background: pink;
}

解决方案#2：伪(‘Ghost’)元素方法(FIDDLE)

CSS：

/* This parent can be any width and height */
.block {
  text-align: center;
  background: orange;
  height: 300px;

}

/* The ghost,nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered,can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}

解决方案#3：FlexBox(FIDDLE)

(相关)CSS：

.block {
   background: orange;
   height: 300px;
   display: flex;
   align-items: center;
}