css中常用的几种高度不固定元素的居中对齐方式有以下几种：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
*{ margin: 0; padding: 0; }
/*flex布局，直接定义项目在垂直方向居中对齐*/
.parent{ width: 500px; height: 300px; border: 1px solid black; display: flex; align-items: center; }
/*flex布局，先定义主轴为垂直方向，然后再定义项目在主轴上的对齐方式为居中*/
.parent{width: 500px; height: 300px; border: 1px solid black; display: flex; flex-direction: column; justify-content: center; }
/*利用table元素的valign特性*/
.parent{width: 500px; height: 300px; border: 1px solid black; display: table; }
.child{ display: table-cell; vertical-align: middle; }
/*使用translate属性*/
.parent{width: 500px; height: 300px; border: 1px solid black; position: relative; }
.child{ position: absolute; top: 50%; transform: translate(0, -50%); }
</style>
</head>
<body>
<div class=”parent”>
<div class=”child”>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident iure vel facere fuga illum dolor reiciendis accusantium nobis blanditiis, odit eum, quisquam, maiores natus unde id iusto, molestias! In, soluta.</div>
</div>
</body>
</html>