calc() size of the current object - css

Question

For some reason when I am using margin auto on each side to centre the element it's not working. I am assuming it's because I am using percentages and whatnot.
I tried to use calc() a bit more, but since the contents of the element I want to centre may vary over time, I want to try and make it always be centred.
I am doing this with the following: margin: 0px calc(50% - 554px / 2) 0px calc(50% - 554px / 2);
The current width of the element is 554px. So dividing it by 2 and removing that from 50% of the parent element will give it the margin on each side that it needs to be centred.
The problem is, the size may vary in the future so I want to replace 554 with an automatic width if that makes sense. So basically I want to haveit like this: margin: 0px calc(50% - width / 2) 0px calc(50% - width / 2); with width being the current element width of course. How can I do this?
I have tried looking this up online, sorry for wasting your time with may seem like a simple question.
div#game {
margin-top: 50px;
width: 80%;
display: inline-block;
float: left;
}
div#gameselect {
margin: 0px calc(50% - 554px / 2) 0px calc(50% - 554px / 2);
display: inline-block;
}
div.gameselect {
float: left;
display: inline-block;
position: relative;
}
p.lefttri {
width: 0;
height: 0;
border-bottom: 30px solid #FF4444;
border-left: 20px solid transparent;
float: left;
}
p#test {
font-family: title;
font-size: 30px;
line-height: 24px;
height: 24px;
color: white;
padding: 3px 11px 3px 0px;
background-color: #FF4444;
display: inline-block;
float: left;
}
p.righttri {
width: 0;
height: 0;
border-top: 30px solid #FF4444;
border-right: 20px solid transparent;
float: left;
z-index: 0;
position: relative;
}
<div id="gameselect">
<a href="https://www.google.com"><div class="gameselect">
<p class="lefttri"></p>
<p id="test">
ONE
</p>
<p class="righttri"></p>
</div></a>
<div class="gameselect gs2">
<p class="lefttri"></p>
<p id="test">
TWO
</p>
<p class="righttri"></p>
</div>
<div class="gameselect gs3">
<p class="lefttri"></p>
<p id="test">
THREE
</p>
<p class="righttri"></p>
</div>
</div>

Answer 1

If you're going to hard code 554px in when calculating those margins, you could just apply width: 554px to #gameselect, then your margin: auto; would work. But it isn't 554px on my side - that width is going to vary depending on the user's browser, and as you can see it doesn't truly center the element. http://codepen.io/anon/pen/wJpNLK Or who knows, maybe this will be centered on your side now.
But there are a number of other ways you could center this content. display: flex; justify-content: center on #gameselect does it fluidly without having to specify fixed widths like that, which you want to avoid.
div#game {
margin-top: 50px;
width: 80%;
display: inline-block;
float: left;
}
div#gameselect {
display: flex;
justify-content: center;
}
div.gameselect {
float: left;
display: inline-block;
position: relative;
}
p.lefttri {
width: 0;
height: 0;
border-bottom: 30px solid #FF4444;
border-left: 20px solid transparent;
float: left;
}
p#test {
font-family: title;
font-size: 30px;
line-height: 24px;
height: 24px;
color: white;
padding: 3px 11px 3px 0px;
background-color: #FF4444;
display: inline-block;
float: left;
}
p.righttri {
width: 0;
height: 0;
border-top: 30px solid #FF4444;
border-right: 20px solid transparent;
float: left;
z-index: 0;
position: relative;
}
<div id="gameselect">
<a href="https://www.google.com">
<div class="gameselect">
<p class="lefttri"></p>
<p id="test">
ONE
</p>
<p class="righttri"></p>
</div>
</a>
<div class="gameselect gs2">
<p class="lefttri"></p>
<p id="test">
TWO
</p>
<p class="righttri"></p>
</div>
<div class="gameselect gs3">
<p class="lefttri"></p>
<p id="test">
THREE
</p>
<p class="righttri"></p>
</div>
</div>