[分享]css中实现垂直水平居中

CSS已经成为网页设计中最重要的组成部分之一，而其中实现垂直水平居中的技巧则是其中比较基础和常见的操作。下面将带大家一起来了解一下，如何在CSS中实现垂直水平居中。首先，我们来看一下如何水平居中一个盒...

CSS已经成为网页设计中最重要的组成部分之一，而其中实现垂直水平居中的技巧则是其中比较基础和常见的操作。下面将带大家一起来了解一下，如何在CSS中实现垂直水平居中。

首先，我们来看一下如何水平居中一个盒子。其中最常见的方案是，将盒子设置为块级元素，然后设置其左右外边距为auto。如下所示的代码：

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 0 auto;
} 

上述代码中，我们设置了一个宽高为200px的盒子，并将其背景色设置为红色，在最后一行中通过margin: 0 auto; 实现水平居中。

接下来，我们再来看一下如何垂直居中一个盒子。这时候我们需要用到一些更加复杂的技巧，例如使用绝对定位、flex布局、grid布局等等。下面分别介绍一下这几种方案。

1、绝对定位方案

这种方案是最常见和最基础的方案，其原理是将盒子设置为绝对定位，并同时设置top和left属性，并将值都设置为50%。但是，这种方案只能水平垂直居中一个已知宽高的盒子。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* 这里50px是上述盒子高度一半的值 */
  margin-left: -50px; /* 这里50px是上述盒子宽度一半的值 */
} 

2、flex布局方案

使用flex布局可以很方便地实现一个盒子的水平垂直居中，只需要在父元素上设置display:flex;和justify-content:center; align-items:center; 就可以了。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 200px;
  height: 200px;
  background-color: red;
} 

3、grid布局方案

使用grid布局也可以很方便地实现一个盒子的水平垂直居中，只需要在父元素上设置display:grid;和place-items:center; 就可以了。

.parent {
  display: grid;
  place-items:center; 
}
.child {
  width: 200px;
  height: 200px;
  background-color: red;
} 

通过上述的介绍，相信大家已经对如何在CSS中实现垂直水平居中有了一定的了解。不同的方案适用于不同的情况，根据具体的需求来选择适合自己的方案才是最重要的。