【css】transform使多行（不定行）文本居中

transform居中

css

 /* 父容器设置宽，高 */
.parent-container{
  	width: 500px;
    height: 200px;
    text-align: center;
}

 /* 文本容器相对定位，top/left均为50%，translate自身的一半 */
.text-container{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

html

 <!-- 单行文本 -->
<div class="parent-container">
   	<div class="text-container">
		如梦令（其二）
    </div>
</div>

 <!-- 多行文本  -->
<div class="parent-container">
	<div class="text-container">
		<p>昨夜雨疏风骤，浓睡不消残酒</p>
		<p>试问卷帘人，却道海棠依旧</p>
		<p>知否？知否？应是绿肥红瘦</p>
	</div>
</div>

其他居中方法

flex布局

使用flex布局可以更快更方便居中： 【css】flexible.css - flex布局的兼容写法