Using calc() on repsonsive width to center element

Question

Is it possible to use calc() to center an element, which has a width defined with % ?

e.g.

.wrapper {
  width: 100%;
  background-color: black;
  height: 300px;
  position: absolute;
  top: 0;
}
.inside {
  width: 100%;
  margin-left: 30px;
  background-color: yellow;
  height: 250px;
  margin: 20px;
}
.inside h1 {
  width: 30%;
  background-color: white;
  text-align: center;
}
.inside h1 {
  position: absolute;
  left: calc(50% - 15%);
  left: -webkit-calc(50% - 15%);
}

<div class="wrapper">
  <div class="inside">
    <h1>CENTERED to viewport</h1>
  </div>
</div>

This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%. The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.

Maybe now it is a bit more clear, why I tried what I tried.

There’s easier ways to center stuff, if you don’t nail everything in place using absolute positioning … — CBroe, Sep 01 '16 at 11:11
Yes I know, this is only a short example. The element which needs to be centered is nested in a complicated owl carousel. The absolute positioning is needed. There is no other way around. — Buntstiftmuffin, Sep 01 '16 at 11:12
And is the width of the element dynamic, or why do you want to use calc? — CBroe, Sep 01 '16 at 11:16
the parent divs like wrapper and inside both are responsive due to being part of the owl carousel. So they are dynamic, and the text is also responsive. The inside div is a bit off-centered, that means it has 30% positioning to the right. — Buntstiftmuffin, Sep 01 '16 at 11:21
I meant if the h1 always has a width of 30%? Because in that case, it makes little sense to use calc here – that 50% minus 15% equals 35% is something you can “calculate” upfront, that doesn’t need anything “dynamic.” — CBroe, Sep 01 '16 at 11:30
I agree with @CBroe - there are plenty of better ways to center things. You may run into lots of issues of compatibility using `calc()` (even with the vendor prefixes). *If* you *really need* to make calculated widths - for compatibility I would suggest using JS/jQuery to do the work. To me, it's not really clear what *exactly* you're asking. Maybe some images/examples of what you're after? — Geoff James, Sep 01 '16 at 11:39
Where you're positioning the `h1` absolutely (`.inside h1`), you could always try setting the `left: 50%` (remove the `calc()`), and the `margin-left: -15%` *(I think)* — Geoff James, Sep 01 '16 at 11:43
Maybe you are right. I think I lost myself somewhere here and need to reprogramm this thing. — Buntstiftmuffin, Sep 01 '16 at 12:02
might be helpful? https://stackoverflow.com/questions/17069435/center-fixed-div-with-dynamic-width-css — jedierikb, Nov 11 '17 at 20:03

score 5 · Answer 1 · answered Sep 01 '16 at 11:34

5

Yes, if you create a variable in the css for example:

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
    --Example: 200px;
    position: absolute;
    left: 50px;
    width: calc(100% - var(--Example)/2);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}
</style>
</head>
<body>

<div id="div1">Some text...</div>

</body>
</html>

answered Sep 01 '16 at 11:34

HudsonPH

1,838
2
22
38

Haven't heard about this thing... kind a interesting. Thanks für this input...! – Buntstiftmuffin Sep 01 '16 at 12:02
it is not common use variables on css, but also you can take values from data attribute :D – HudsonPH Sep 01 '16 at 12:36

score 0 · Answer 2 · answered Sep 01 '16 at 11:16

0

If you can have fixed width just add margin: 0px auto. This will center the text horizontally.

.wrapper {
  width: 100%;
  background-color: black;
  height: 300px;
  position: absolute;
  top: 0;
}
.inside {
  margin-left: 30px;
  background-color: yellow;
  height: 250px;
  margin: 20px;
}
.inside h1 {
  width: 40%;
  background-color: white;
  text-align: center;
  margin: 0px auto;
}

<div class="wrapper">
  <div class="inside">
    <h1>CENTERED to viewport</h1>
  </div>
</div>

answered Sep 01 '16 at 11:16

Pugazh

9,453
5
33
54

Sorry if I haven't made myself clear enoug. The width of all elements is given in %, there is no way to avoid this. I hoped someone knows a way to import the calculated width into the calc(). – Buntstiftmuffin Sep 01 '16 at 11:23

Using calc() on repsonsive width to center element

2 Answers2