How can I center just one element within a container?

Question

I have to create this look (from a mockup):

Based on what I read here [CSS: center element within a <div> element, I tried this:

.textaligncenter {
    text-align:center;
}

.platypuscenter {
    margin:auto;
}

<div class="row">
    <div class="col-md-6">
        <div class="containerforproact leftmarginbreathingroom platypuscenter">
            <h4 class="leftmarginbreathingroom">PRODUCE USAGE (report spans up to 13 months)</h4>
            <label class="leftmarginbreathingroom">From</label>
            <select class="dropdown" id="produsagefrom" name="produsagefrom">
                @for (int i = 1; i <= maxMonthsBackBegin; i++)
                {
                    if (i == 13)
                    {
                        <option id="selItem_@(i)" value="@i" selected="selected">@i</option>
                    }
                    else
                    {
                        <option id="selItem_@(i)" value="@i">@i</option>
                    }
                }
            </select>
            <label>months back</label>
            <label>to</label>
            <select id="produsageto" name="produsageto">
                @for (int i = 1; i <= maxMonthsBackEndNormal; i++)
                {
                    <option id="selItem_@(i)" value="@i">@i</option>
                }
            </select>
            <label>months back</label>
            <br />
            <button class="btn btn-sm orange textaligncenter" id="btnTestProduceUsageSettings">TEST SETTINGS</button>
        </div>
    </div>
    . . .

...but that produces this (everything centered):

Moving the "textaligncenter" class to just the button (the only element I want to center) like so:

<div class="row">
    <div class="col-md-6">
        <div class="containerforproact leftmarginbreathingroom">
            <h4 class="leftmarginbreathingroom">PRODUCE USAGE (report spans up to 13 months)</h4>
            <label class="leftmarginbreathingroom">From</label>
            <select class="dropdown" id="produsagefrom" name="produsagefrom">
                @for (int i = 1; i <= maxMonthsBackBegin; i++)
                {
                    if (i == 13)
                    {
                        <option id="selItem_@(i)" value="@i" selected="selected">@i</option>
                    }
                    else
                    {
                        <option id="selItem_@(i)" value="@i">@i</option>
                    }
                }
            </select>
            <label>months back</label>
            <label>to</label>
            <select id="produsageto" name="produsageto">
                @for (int i = 1; i <= maxMonthsBackEndNormal; i++)
                {
                    <option id="selItem_@(i)" value="@i">@i</option>
                }
            </select>
            <label>months back</label>
            <br />
            <button class="btn btn-sm orange textaligncenter platypuscenter" id="btnTestProduceUsageSettings">TEST SETTINGS</button>
        </div>
    </div>
    . . .

...produces this (nothing centered):

How can I get the button, the whole button, and only the button, to center within the container?

timolawl · Accepted Answer · 2016-05-06T18:23:38.757

You can do something like this:

button {
  margin-left: 50%;  // shifts the button to the right by 50% of container's width
  transform: translateX(-50%); // shifts 50% of the button width to the left
}

Here's a workable example:

div {
  width: 100%;
  background: lightgreen;
}

button {
  margin-left: 50%;
  transform: translateX(-50%);
}

<div class="row">
    <div class="col-md-6">
        <div class="containerforproact leftmarginbreathingroom">
            <h4 class="leftmarginbreathingroom">PRODUCE USAGE (report spans up to 13 months)</h4>
            <label class="leftmarginbreathingroom">From</label>
            <select class="dropdown" id="produsagefrom" name="produsagefrom">
                @for (int i = 1; i <= maxMonthsBackBegin; i++)
                {
                    if (i == 13)
                    {
                        <option id="selItem_@(i)" value="@i" selected="selected">@i</option>
                    }
                    else
                    {
                        <option id="selItem_@(i)" value="@i">@i</option>
                    }
                }
            </select>
            <label>months back</label>
            <label>to</label>
            <select id="produsageto" name="produsageto">
                @for (int i = 1; i <= maxMonthsBackEndNormal; i++)
                {
                    <option id="selItem_@(i)" value="@i">@i</option>
                }
            </select>
            <label>months back</label>
            <br />
            <button class="btn btn-sm orange textaligncenter platypuscenter" id="btnTestProduceUsageSettings">TEST SETTINGS</button>
        </div>
    </div>
</div>

Here are two invaluable references on centering things in CSS:

score 1 · Answer 2 · answered May 06 '16 at 18:18

You can give the button a position absolute (make sure it's parent is position relative) and then move it to the right 50% and finally back it up with a margin-left that is 1/2 the width of the button. Here's a css example:

.containerforproact {
  position: relative;
}

button {
  position: absolute;
  left: 50%;
  width: 150px;
  margin-left: -75px;
}

score 1 · Answer 3 · answered May 06 '16 at 18:25

I'm a little confused because it seems like everything is centered in the mockup, but you say you only want the button centered. That said, you could wrap the button in a div that has the "textaligncenter" class. Giving text-align:center to the button will only affect the text within the button. As long as the buttons container div is the width of the "containerforproact" div (which it should be) you'll get the look you want.

How can I center just one element within a container?

3 Answers3