Dynamically centered nested vis

Question

The problem is that I can't use any fixed widths or heights. I have a textbox which needs to vertically and horizontally centered inside a bordered box. There should be 10px of margin between my textbox and the bordered box. The bordered box, in turn, should be horizontally centered.

Basically, no matter what text I enter, I need the div "copy-container" to scale its height/width accordingly whilst still maintaining 1) horizontal and vertically centered text 2) horizontally centered "copy-container".

The code I have below achieves everything except that the text doesn't vertically align :(

.wrapper {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 55px;
  height: 300px;
  background-color: #ecf0f1;
}

.copy-container {
  position: relative;
  display: table;
  height: auto;
  /*padding: 5px 10px 5px 10px;*/
  border: 1px solid black;
  margin: auto;
}

.copy-container p {
  position: relative;
  margin: 5px 5px 5px 5px;
}

<div class="body">
  <div class="wrapper">
    <div class="copy-container">
      <p>WHERE BROOKLYN AT <br> WHERE BROOKLYN AT <br> WHERE BROOKLYN AT</p>
      <div class="cta-container">
      </div>
    </div>
  </div>
</div>

Possible duplicate of [How to vertically center text with CSS?](http://stackoverflow.com/questions/8865458/how-to-vertically-center-text-with-css) — Abhishek Pandey, May 11 '17 at 05:45

score 1 · Accepted Answer · answered May 11 '17 at 05:47

I usually use the same trick for vertical centering: set the element to position: absolute;, then scoot it by 50% from the top and left, and translate it to the top and left by half of its size:

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

.wrapper {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 55px;
  height: 300px;
  background-color: #ecf0f1;
}

.copy-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: table;
  height: auto;
  /*padding: 5px 10px 5px 10px;*/
  border: 1px solid black;
  margin: auto;
}

.copy-container p {
  position: relative;
  margin: 5px 5px 5px 5px;
}

<div class="body">
  <div class="wrapper">
    <div class="copy-container">
      <p>WHERE BROOKLYN AT <br> WHERE BROOKLYN AT <br> WHERE BROOKLYN AT</p>
      <div class="cta-container">
      </div>
    </div>
  </div>
</div>

that's a good trick! but I'm still experiencing the same problem. For some reason, the height of the "copy-container" doesn't wrap the text inside. It's much too tall, even though I didn't set a fixed height. I just set height to auto. — Seanyboy Lee, May 11 '17 at 06:17
When I hit "Run code snippet" it seems to be the correct height (just enough to fit the text + 10px margins). Is this not the case for you? — Karin, May 11 '17 at 06:19
actually I figured it out. One of the other divs in my code was messing with the height of my "copy-container" div. thanks again! — Seanyboy Lee, May 11 '17 at 06:21

Dynamically centered nested vis

1 Answers1