css上下左右居中显示

CSS中居中对于页面设计来说是至关重要的。在页面布局中，我们有时需要将某些元素居中，包括水平居中和垂直居中。

下面我们将通过代码演示来介绍CSS中的上下左右居中显示。

// 水平居中
.center{
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

// 垂直居中
.center{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

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

上面的代码中，我们分别给定了居中元素的left和top属性，以及相应的transform属性，使其实现水平居中、垂直居中和水平垂直居中的效果。

需要注意的是，元素的父元素也需要设置position属性，否则子元素的绝对定位会相对于文档来定位。另外，需要为translate添加单位，否则IE8及以下版本不支持。

以上就是CSS实现元素上下左右居中显示的方法。记得在使用时根据需要选择不同的方案来实现。