html运行实例（css_align_transform）-搜寻教程库

代码示例：（标识：css_align_transform）

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h1>居中</h1>

<p>在此例中，我们使用 position 和 transform 属性将 div 元素垂直和水平居中：</p>

<div class="center">
  <p>我是垂直和水平居中。</p>
</div>

</body>
</html>