css3 flex实现div内容水平垂直居中的几种方法

针对“CSS3 flex 实现 div 内容水平垂直居中的几种方法”，我为您提供以下完整攻略：

1. 使用flex布局

设置外层父元素的display:flex; justify-content:center; align-items:center;，这样，子元素就实现了垂直水平居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

2. 使用定位

设置外层父元素定位为相对定位，子元素定位为绝对定位。然后，用top:50%; 和 left:50%; 把子元素放置在父元素的正中间。最后用transform属性调整位置。

.parent {
  position: relative;
  height: 100vh;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

示例1：使用flex布局

<div class="container">
  <div class="item">内容垂直水平居中</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  display: inline-block;
  background: #f40;
  color: #fff;
  padding: 16px 24px;
}

上述示例中，我们在页面中创建了一个名为“item”的div，然后使用Flex布局使其垂直水平居中。

示例2：使用定位

<div class="parent">
  <div class="child">内容垂直水平居中</div>
</div>

.parent {
  position: relative;
  height: 100vh;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f40;
  color: #fff;
  padding: 16px 24px;
}

上述示例中，我们在页面中创建了一个名为“child”的div，然后使用定位将其放置于父元素的正中间，实现垂直居中的效果。

综上可知，以上两种方法都能够实现CSS3的Flex布局，在实际应用过程中，我们可以根据具体需求和情况，选择使用哪种方法来实现内容水平垂直居中的效果。