CSS center div with <p> to parent div, vertically and horizontally : <p>I have the following HTML/CSS where I try to center a <code>div</code> with some <code>&lt;p&gt;</code> to their parent <code>div</code> wrapper. I tried to use the well known <code>translate(-50%, -50%)</code> solution, but it does not work. I also tried to use <code>margin: 0 auto</code>, also without success. I think I am missing a point, but I dont get it. Could someone tell me?</p>

<p>Hint: This is an MCVE constructed from only the relevant HTML and CSS rules, there are a lot of more so dont be confused about some <code>display:block</code> or an <code>!important</code>. I coloured the background and borders for better visualization.</p>

<p>Here is the snippet:  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.half-width {
  width:50%;
  height: 795px;
}

div, p {
  border: 1px solid red;
}

.container {

  font-family: 'IBMPlexSans';
}
.container &gt; div {
  box-sizing:border-box;
  border: 1px solid green;
  background-color: inherit;
}

.container{
    display:flex;  
 padding: 0;
 width: 100%;
  background-color: aqua;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  
  .mobile-only{
	display: block;
	width: 100%;
  }
  /** for switching between mobile and desktop rules **/
  .desktop-only{
	  display: none;
  }
  
  .background-black{
	background-color: #4E4E4E !important;
	width: 650px !important;
	border-radius: 20px;
  }
  
  .size-35{
	  font-size: 35px;
	  height: 526px;
	  text-transform: uppercase;
  }
  
  .size-25{
	  font-size: 25px;
	  width: 335px;
	  height: 95px;
  }
  
    .size-19{
	  font-size: 19px;
	  width: 335px;
	  height: 350px;
	  margin-top: -25px;
  }


/** center container div to an unknown body, works fine **/
  .center-to-bg{
	  margin-left: auto;
	  margin-right: auto;
  }
  
  .height-495{
	  height: 495px;
  }
  
  .height-526{
	  height: 526px;
  }
  .desc-text &gt; p{
	  display: block;
  }
  
/** center the content div with the text to its parent,
horizontally AND vertically, does not work**/
  .center-text{
	  position: relative;
	  text-align: center;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
  }
  
  .center-text &gt; p{
	  display: block;
  }
  
  .center-h{
	  display: block !important;
	  left: 50%;
  }
 
 
	.half-width{
	  width: 100vw;
	}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt; 
&lt;div class="half-width mobile-only background-black height-526 center-to-bg"&gt;
  &lt;div class="center-text color-white size-35" id="section2"&gt;
	&lt;p&gt;ThIS IS &lt;/p&gt;
	&lt;p&gt;Á PARAGRAPH&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
    &lt;div class="half-width mobile-only center-to-bg"&gt;
  &lt;div class="center-text color-white size-19"&gt;
        &lt;div class="desc-text"&gt;
        &lt;p&gt;This is a long text that needs to be centered over multiple lines&lt;/p&gt;
          &lt;p&gt;
          Because mobile devices are not that width
          &lt;/p&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
