一、 不定宽高元素程度垂直居中
1、transform: translate()
<div class="wrapper"> <p class="center">程度垂直居中</p></div>.wrapper{ background-color: #eee; height:200px; } .center{ position: relative; width: 300px; padding: 10px 20px; background-color: #2c3e50; color: #fff; left: 50%; right: 50%; transform: translate(-50%, -50%); }毛病：IE9以下不兼容
2、flex 布局，利用justify-content和align-items 实现居中
<div class="wrapper"> <p class="center3">程度垂直居中</p> </div> .wrapper{ height:200px; background-color: #eee; display: flex; justify-content: center; align-items: center; } .center2 { position: relative; width: 300px; padding: 10px 20px; background-color: #2c3e50; color: #fff; }3、应用table+table-cell实现垂直居中，display:inline-block;或margin: auto;实现程度居中
<div class="wrapper"> <div class="content"> <p class="center3">程度垂直居中</p> </div></div> .wrapper{ background-color: #eee; height: 200px; width: 100%; display: table; } .content { display: table-cell; text-align: center; vertical-align: middle; } .center3 { display: inline-block; width: 300px; padding: 10px 20px; background-color: #2c3e50; color: #fff; }4、伪元素：after, :before 应用inline-block+ vertical-align:middle 对齐伪元素
<div class="wrapper"> <p class="center4">程度垂直居中</p> </div> .wrapper { background-color: #eee; height: 200px; width: 100%; position: relative; } .wrapper:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .center4 { background-color:#2c3e50; padding: 10px 20px; color:#fff; display: inline-block; }5、writing-mode: 扭转文字的显示方向
<div class="wrapper"> <div class="content"> <p class="center5">程度垂直居中</p> </div> </div>.wrapper { background-color:#eee; width: 100%; height: 200px; writing-mode: vertical-lr; } .content { writing-mode: horizontal-tb; display: inline-block; width: 100%; } .center5 { background-color:#2c3e50; padding: 10px 20px; color:#fff; display: inline-block; margin: auto; text-align: left; }二、 固定宽高元素程度垂直居中
6、absolute+ 负margin
<div class="wrapper"> <p class="center6">程度垂直居中</p></div> .wrapper { background-color: #eee; height: 200px; width: 100%; position: relative; } .center6{ background-color: #2c3e50; color: #fff; width: 300px; height: 50px; line-height: 50px; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -25px; }设置相对定位，left:50%; top: 50%;使以后元素的左上角处于父元素的核心地位， 再利用负margin使其核心位于父元素的核心。
7、absolute+ 上下左右等值
<div class="wrapper"> <p class="center7">程度垂直居中</p> </div> .wrapper { background-color: #eee; height: 200px; width: 100%; position: relative; }.center7 { background-color: #2c3e50; color: #fff; width: 300px; height: 50px; line-height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }