div水平垂直居中的完美解决方案

下面是关于 "div水平垂直居中的完美解决方案" 的详细攻略：

利用flex布局实现垂直水平居中

1. 首先，我们需要为外层容器设置 display: flex;justify-content: center;align-items: center; 的样式，其中 justify-content 和 align-items 分别设置为 center，使得容器中的元素垂直居中且水平居中。
2. 接着，在需要居中的元素上添加 margin: auto; 的样式实现水平居中。

以下是示例代码：

<div class="parent">
   <div class="child">我要居中</div>
</div>

<style>
   .parent {
      display:flex;
      justify-content:center;
      align-items:center;
   }
   .child {
      margin:auto;
   }
</style>

利用绝对定位实现垂直水平居中

1. 首先，我们需要为外层容器设置 position: relative; 的样式，以使得内部元素可以使用绝对定位相对于该容器进行定位。
2. 接着，在需要居中的元素上添加 position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; 的样式实现垂直居中和水平居中。

以下是示例代码：

<div class="parent">
   <div class="child">我要居中</div>
</div>

<style>
   .parent {
      position:relative;
   }
   .child {
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
   }
</style>

以上就是利用 flex 布局和绝对定位实现 div 水平垂直居中的完美解决方案。