[分享]css元素垂直居中和水平居中

CSS是网页设计中必不可少的一部分，而元素的垂直居中和水平居中是常见的设计需求，下面我们来了解如何实现这两种布局方式。元素垂直居中.element { : absolute; top: 50; tra...

CSS是网页设计中必不可少的一部分，而元素的垂直居中和水平居中是常见的设计需求，下面我们来了解如何实现这两种布局方式。

元素垂直居中

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

首先，这里使用了绝对定位，以便对元素进行精准的控制。然后，我们设置了元素顶部距离父元素顶部的距离为50%，也就是说，元素距离顶部的位置已经定好了。但是，这时元素的中心并不与父元素的中心对齐，还需要将元素自身的一半高度向上移动，这里使用了CSS3的transform属性，设置它的translateY为元素高度的一半的负值，就能实现元素的垂直居中了。

元素水平居中

.element {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
} 

在垂直居中的基础上，我们再来看一下如何实现元素的水平居中。这里同样使用了绝对定位，然后将元素左边距离父元素左边的距离设置为50%。但是，这时元素的左边并不与父元素的中心对齐，还需要将元素自身的一半宽度向左移动，这里同样使用了CSS3的transform属性，设置它的translateX为元素宽度的一半的负值，就能实现元素的水平居中了。