[分享]css元素上下左右居中显示

CSS是一种常用的前端开发语言，用来控制网页的样式和布局，其中居中显示是常见的样式要求之一。那么如何让一个元素在页面上居中显示呢？首先，我们需要了解元素的宽、高与父元素的关系。可以通过以下代码获取元素...

CSS是一种常用的前端开发语言，用来控制网页的样式和布局，其中居中显示是常见的样式要求之一。那么如何让一个元素在页面上居中显示呢？

首先，我们需要了解元素的宽、高与父元素的关系。可以通过以下代码获取元素的宽、高：

 var width = element.offsetWidth;
  var height = element.offsetHeight; 

我们可以使用以下样式让一个元素水平居中显示：

 .center {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
  } 

其中，设置元素的宽度为200px，使用绝对定位使元素脱离文档流，使用left属性将元素左边缘与父元素左边缘对齐，然后通过margin-left属性将元素向左移动自身宽度的一半，即可实现水平居中。

如果要让一个元素垂直居中显示，可以使用以下样式：

 .center {
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
  } 

同样地，设置元素的高度为200px，使用绝对定位使元素脱离文档流，使用top属性将元素上边缘与父元素上边缘对齐，然后通过margin-top属性将元素向上移动自身高度的一半，即可实现垂直居中。

如果要让一个元素同时水平垂直居中显示，可以使用以下样式：

 .center {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
  } 

先使用前两行设置元素的宽、高，然后使用绝对定位使元素脱离文档流，使用top、left属性将元素上下左右都与父元素对齐，然后通过margin-top、margin-left属性将元素向上、向左移动自身高度、宽度的一半，即可实现水平垂直居中显示。