[分享]css3居中的代码

CSS3居中功能是CSS3提供的一种布局方式，可以在HTML中使用这种功能，让页面元素在屏幕中央水平或垂直居中。

/*水平居中*/
div {
  width: 200px;
  height: 100px;
  margin: 0 auto;
}

/*垂直居中*/
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*水平垂直都居中*/
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

以上代码中，第一个例子使用margin将元素水平居中，其中auto会使元素左右两侧的外边距相等，从而实现居中效果。

第二个例子使用了position属性和transform属性，top和left都设置为50%，使元素垂直和水平都居中，transform属性中的translate(-50%,-50%)是为了让元素正中心与屏幕正中心重合。

第三个例子是将以上两个方法结合起来，水平垂直都居中。

CSS3居中功能可以在Web开发中大显身手，为我们的布局工作带来了极大的便捷。