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

CSS中，元素的垂直和水平居中显示是一项非常常用的技巧。下面，我们就来看看如何实现这一技巧。首先，我们可以使用CSS3中的Flexbox布局来实现元素的居中显示。我们可以在父容器上应用以下代码： .c...

CSS中，元素的垂直和水平居中显示是一项非常常用的技巧。下面，我们就来看看如何实现这一技巧。

首先，我们可以使用CSS3中的Flexbox布局来实现元素的居中显示。我们可以在父容器上应用以下代码：

.container {
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
} 

我们可以在代码中看到，通过在容器上设置“display: flex”，就可以使得容器以Flexbox模式进行布局。而“justify-content: center”和“align-items: center”则分别表示水平和垂直方向上居中对齐。

如果不使用Flexbox布局，我们也可以通过CSS中的position和transform属性来实现元素的垂直水平居中。代码如下：

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

在这个代码中，我们首先将元素的position属性设置为absolute，这样它就可以脱离父容器，并以窗口为参照物进行定位。然后，我们将元素的top和left属性都设置为50%，将其位置移动到屏幕中心。最后，我们再使用transform属性，并将其设置为指定的偏移量，就可以确保元素在垂直和水平方向上均为居中显示。

在CSS中实现元素的垂直和水平居中显示是一项非常有用和实用的技能。通过上文介绍的两种方法，我们可以轻松实现元素在任何情况下的居中显示。