如何使用CSS让文本内容在块级元素居中

1.设置line-height等于父级块元素高度， 同时设置水平居中对齐text-align

  <!-- div1为父级块元素 -->
	<div class="div1">
		<p>这是一行需要居中对齐的文本</p>
	</div>

<style type="text/css">
	*{margin: 0px;padding: 0px}

 <!-- 对div1设置css属性，长宽250px，背景蓝，宽250px -->

	.div1{width: 250px;height: 250px;background: blue;}
	
	 <!-- 对p设置css属性，行高250px，文本居中对齐 -->
	
	p{text-align: center;line-height: 250px}
</style>

效果如图

2.设置div1 table-cell vertical-align和text-align 进行居中定位

<div class="div1">
		这是一行需要居中对齐的文本
	</div>

 <!-- 对div1设置css属性，长宽250px，背景黄，并作为一个表格单元格显示，文本水平垂直居中 -->

.div1{width: 250px;height: 250px;background: yellow;display:table-cell;text-align: center;vertical-align: middle;}

效果如图

3.设置p标签转化成块元素进行定位

<div class="div1">
		<p>这是一行需要居中对齐的文本</p>
	</div>


 <!-- 对div1设置css属性，长宽250px，背景蓝，并添加绝对定位（就是打死都不动） -->
 
.div1{width: 250px;height: 250px;background: blue;position: absolute;}

<!-- 对p标签设置css属性，背景黄，转化块元素，文本内容居中，上边距移动50%（父元素为参考系），向上平移自身的50%（自己为参考系） -->

p{background: yellow;display: block;text-align: center;margin-top: 50%;transform: translateY(-50%);}

效果如图