css设置多行文本始终保持垂直居中_css文字无论多少行都居中

在做网站时经常会需要做列表排版，然后让垂直居中，如果是文字相同还好，如果是文字不确定是几行，但是要始终保持垂直居中，该怎么办呢？其实很简单只需要，给父元素设置固定高度 height：px 和display: table; 子元素设置  display: table-cell; vertical-align: middle; 就可以啦。下方案例

css设置多行文本始终保持垂直居中html代码

 
 <div class="anli">
     <p>
       css设置多行文本始终保持垂直居中文字
    </p>
  </div>
 
   <div class="anli">
     <p>
       css设置多行文本始终保持垂直居中文字<br>
       css设置多行文本始终保持垂直居中文字<br>
	   css设置多行文本始终保持垂直居中文字<br>
    </p>
  </div>

css设置多行文本始终保持垂直居中css代码 

 
  .anli{
  float:left;
  text-align: center;
  height:400px;
  border:1px solid #333;
  display: table;
  }
  p{
  display: table-cell;
  vertical-align: middle;
 }	
 

css设置多行文本始终保持垂直居中效果图