记录实现水平垂直居中的5种方法

记录块级元素实现水平垂直居中的方法，效果如图。

  
居中元素




.parent {
  position: re服务器托管lative;
  width: 600px;
  height: 300px;
  background-color: #679389;
}
.child {
  width: 300px;
  height: 120px;
  background-color: #d8a7a0;
  text-align: center;
  line-height: 120px;
}

方法1：flex布局。给parent设置center_1。

.center_1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法2：grid布局。设置一个3×3的网格，将子元素放在中间个字中。给parent设置center_2，给child设置center_2–child

.center_2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.center_2--child {
  grid-row-start: 2;
  grid-column-start: 2;
}

方法3：absolute+margin矫正偏移。给child设置center_3，此时margin矫正的位置分别是宽高的一半，因此需要知道子元素的宽高。

.center_3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -150px;
}

方法4：absolute+transfom矫正偏移。给child设置center_3。

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

方法5：display: table-cell。给parent设置center_5，此时如果子元素为块级元素，text-align不会生效，可以给子元素child设服务器托管置display: inline-block。

.center_5 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.center_5--child {
  display: inline-block;
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 力扣热题100_双指针_15_三数之和

文章目录 题目链接 解题思路 解题代码 题目链接 15. 三数之和 给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i != j、i != k 且 j != k ，同时还满足 nums[i] + …