[分享]css不定高div水平垂直居中

CSS不定高DIV水平垂直居中是一个经常使用的技巧，它可以在网页布局和设计中起到很好的作用。下面我们来详细介绍如何实现。 首先，我们需要准备一个不定高的DIV元素，它可以是一个文字、图片或其他任何元素...

CSS不定高DIV水平垂直居中是一个经常使用的技巧，它可以在网页布局和设计中起到很好的作用。下面我们来详细介绍如何实现。
首先，我们需要准备一个不定高的DIV元素，它可以是一个文字、图片或其他任何元素。然后，我们可以使用下面的代码来实现水平垂直居中：

<div class="container">
  <div class="content">
    Hello World!
  </div>
</div>
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
<br>
  .content {
    text-align: center;
    vertical-align: middle;
  }
</style> 

以上代码中，我们使用了flex布局，并将容器元素设置为居中对齐。同时，我们将内容元素设置为居中对齐，并使用文本居中来使其在容器中水平垂直居中。
如果我们想要一个更加通用的方法，可以使用绝对定位来实现。以下是实现绝对定位的代码：

<div class="container">
  <div class="content">
    Hello World!
  </div>
</div>
<style>
  .container {
    position: relative;
    height: 100%;
  }
<br>
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
</style> 

以上代码中，我们将容器元素设置为相对定位，并将内容元素设置为绝对定位，并使用transform属性来将其居中对齐。
综上所述，根据需要我们可以选择使用flex布局或绝对定位来实现CSS的不定高DIV水平垂直居中。这个技巧可以使我们在网页设计和布局中更加灵活自如，提升用户的体验。