[分享]css与父元素垂直居中

CSS与父元素垂直居中是网页设计中非常常用的技巧，它可以让网页元素在不同尺寸的设备上都能够自适应，并且使页面看起来更美观舒适。下面是实现这个技巧的两种方法：方法一： 父容器为相对定位，子元素绝对定位，...

CSS与父元素垂直居中是网页设计中非常常用的技巧，它可以让网页元素在不同尺寸的设备上都能够自适应，并且使页面看起来更美观舒适。下面是实现这个技巧的两种方法：

方法一：
父容器为相对定位，子元素绝对定位，top、left、right、bottom均为0。
例如：
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

方法二：
使用flexbox。
例如：
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
} 

方法一中，父容器以相对定位作为参考系，子元素以绝对定位的方式绝对居中。其中，top、left、right、bottom属性均设置为0，表示子元素与父容器四边都相距零像素，然后使用margin:auto属性使子元素自身在父容器中水平垂直居中。

方法二中，利用了flexbox布局的特性，通过display:flex属性将父容器设定为容器的flex容器，然后使用justify-content:center和align-items:center属性将子元素水平垂直居中。

总之，通过CSS与父元素垂直居中技巧，可以轻松实现任何大小的屏幕上的自适应排版，并且可以让网页看起来更加整洁和美观。