带有标题 id 的中心 div

Question

I have a title and a div horizontally, what I am trying to do is to center the div with the corresponding title.

enter image description here

As can be seen in the image, it cannot be centered properly.

This is my code:

<h1 id='<?= str_replace(" ", "", $data->title); ?>'><?= $data->title; ?></h1>
<?= $data->text; ?>

<div class="flexbox">
  <div class="contenido-flex">
    <blockquote>
      <p><?= $data->title; ?></p>
    </blockquote>
    <pre class="is-paddingless" id="a<?= esc($data->id); ?>"><code class="<?= strtolower($data->tip); ?>">
          <?php if ($data->fdc== "JSON") : ?>
          <?= json_decode($data->cod); ?>
          <?php else : ?>
             <?= $data->cod; ?>
          <?php endif; ?>  
          </code></pre>
  </div>
</div>




.flexbox {
    /*  */
    height: 100vh;
}

.contenido-flex {
    margin-top: -700px;
}

Answer 1

You could use align-items: center; Here is an example:

 .flexbox { background: red; height: 100vh; display: flex; align-items: center; align-content: center; }.contenido-flex { background: green; }

 <h1 id='123'>MyTitle</h1> <div class="flexbox"> <div class="contenido-flex"> <blockquote> <p>Title</p> </blockquote> <pre class="is-paddingless" id="a-11>"><code class="123"> Some Data </code></pre> </div> </div>