[分享]css3屏幕居中显示

CSS3提供了一种简单的方法，让我们能够将一个元素在屏幕中垂直和水平居中。在这篇文章中，我们将介绍这种方式，让你轻松实现屏幕居中显示。要将一个元素在屏幕中居中显示，我们需要设置元素的宽度和高度，然后使...

CSS3提供了一种简单的方法，让我们能够将一个元素在屏幕中垂直和水平居中。在这篇文章中，我们将介绍这种方式，让你轻松实现屏幕居中显示。

要将一个元素在屏幕中居中显示，我们需要设置元素的宽度和高度，然后使用一些CSS属性来控制其位置。下面是一个可以使元素在屏幕中垂直和水平居中的CSS代码：

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

这里，我们将元素的定位方式设置为absolute，并使用top和left属性将元素的中心点移动到屏幕的中心。然后，我们使用transform属性将元素向左和向上移动，以便将其完全居中。

此外，我们还需要确保元素的宽度和高度已经设置。您可以使用像素或百分比来设置这些值，具体取决于您的需求。要使元素具有固定的宽度和高度，您可以使用以下代码：

.center {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

通过这种方式设置的元素将始终在屏幕中央显示，无论屏幕的大小如何。因此，这是一种非常有用的技巧，可以大大简化您的布局和设计工作。