CSS vertical and horizontal align center

Question

I use the following style to vertically and horizontally align content.

.middle_center{
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

However, if the content of .middle_center is larger than 50%, the left:50% applied means the width of .middle_center can only stretch to 50% of it's parent.

Here is a full code:

.parent{
  position:relative;
  background:#ff00ff;
  width:800px;
  height:300px;
}
.middle_center{
  position:absolute;
  background:#0000ff;
  color:#fff;
  padding:20px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

<div class="parent">
  <div class="middle_center">This is some content. The left:50%; causes its width to be reduced to 50% of its parent's width.</div>
</div>

If I apply width: fit-content; then it works as expected. However this isn't supported by all browsers.

Does anyone know of a way to prevent the width from shrinking? It would like to add CSS only to the child element without adding styles to the parent if possible.

Here is a codepen link:

https://codepen.io/jonniejoejonson/pen/jvddPB

`is larger than 50%` --> 50% of what? – Temani Afif Sep 20 '18 at 19:08 — Temani Afif, Sep 20 '18 at 19:08
share a complete code where you show the issue – Temani Afif Sep 20 '18 at 19:10 — Temani Afif, Sep 20 '18 at 19:10
so you want the width to be 100%? – Temani Afif Sep 20 '18 at 19:58 — Temani Afif, Sep 20 '18 at 19:58
Thanks Temani, I want the width to fit to it's content. – jon Sep 20 '18 at 19:59 — jon, Sep 20 '18 at 19:59
like an inline block so? – Temani Afif Sep 20 '18 at 20:01 — Temani Afif, Sep 20 '18 at 20:01

score 1 · Answer 1 · answered Sep 20 '18 at 19:16

1

If you're trying to center the child horizontally and vertically, why not try using flexbox? An example of that with a blue box would look something like this:

.middle_center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}

.blue_box {
  width: 300px;
  height: 300px;
  background-color: #05c;
}

With the HTML like this:

<div class="middle_center">
  <div class="blue_box"></div>
</div>

Here's a working example on JSFiddle.

answered Sep 20 '18 at 19:16

Christopher Bradshaw

2,615
4
24
38

1

Thanks Christopher. I looked at this as a solution, but I wanted a way that allowed me to simply apply a class to a div to either align content to top-left, top-center, top-right, middle-left, ... etc. Flex box was good but required an extra wrapper. – jon Sep 20 '18 at 20:07

Temani Afif · Accepted Answer · 2018-09-20T20:12:39.110

1

Make the element inline-block then center it horizontally using text-align:center and vertically using position:absolute considering an extra wrapper:

.parent {
  position: relative;
  background: #ff00ff;
  width: 600px;
  height: 200px;
  border: 1px solid;
}

.middle_center {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.middle_center>div {
  display: inline-block;
  color: #fff;
  padding: 20px;
  background: #0000ff;
}

<div class="parent">
  <div class="middle_center">
    <div>This is some content.</div>
  </div>
</div>
<div class="parent">
  <div class="middle_center">
    <div>This is some content. This is some content This is some content</div>
  </div>
</div>
<div class="parent">
  <div class="middle_center">
    <div>This is some content. This is some content This is some content This is some content</div>
  </div>
</div>

edited Sep 20 '18 at 20:12

answered Sep 20 '18 at 20:05

Temani Afif

245,468
26
309
415

Thanks Temani. I marked this as the answer as it does resolve the issue, however as you've pointed out it requires an extra wrapper. Ideally it could be done without the extra wrapper, otherwise I might as well use Flexbox. – jon Sep 20 '18 at 20:14
@jon actually I don't see any other solution without extra wrapper and without applying properties to parent container, it might be possible ... by the way you aren't obliged to accept the asnwer fast :) probably you will get more ;) you may also add more details in your question to say that you don't need to apply any CSS to parent and without extra wrapper if possible – Temani Afif Sep 20 '18 at 20:17
@TemaniAfif you are sure that you are not a rep farmer? this is probably the question asked more times in SO at least in `css` tag, and you know that, so you still answer when there are dozens of duplicates – dippas Sep 20 '18 at 20:26
@dippas you may probably check the comments he added to this answer and to the other to see its specific requirement ;) – Temani Afif Sep 20 '18 at 20:28
it still is a duplicated, there are a few (at least) answer with solution similar or even better than yours to this problem in particularly – dippas Sep 20 '18 at 20:30
@dippas so add the correct duplicate question, because actually I don't see any answer in the linked question that meet the requirements ... well I am for sure wrong of course. – Temani Afif Sep 20 '18 at 20:35
as OP said Flexbox solves this issue (and CSS Grid) and are in the duplicated. – dippas Sep 20 '18 at 20:37

score -1 · Answer 3 · answered Sep 20 '18 at 19:23

-1

if you try to center this using this technique then use the position:absolute; on that class (.middle_center) and give position:relative; to its parent.

answered Sep 20 '18 at 19:23

Ahmed

52
6

CSS vertical and horizontal align center

3 Answers3