How to center a div horizontally with a varying width

Question

I did a lot of research on this and found that if you set a width, you can use margin: 0 auto with a left: 0;, right: 0, and position: absolute, but everything I saw had a declared width.

Well in my case, I will be doing this for a button with a cursor: pointer;, so I do not want to set a width because the cursor will turn into pointer. In addition this will be a link and that will mess it up even more.

So, with that said, my question is, how can a div be centered with an absolute value without declaring a width.

.blue-section {
  background-color: #9BD0D2;
  height: 500px;
  width: 100%;
  position: relative;
}
#blue-info-container {
  top: 20%;
  position: absolute;
  left: 0;
  right: 0;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#blue-section-title {
  color: #FFF;
  font-size: 1.4em;
  padding-bottom: 75px;
}
#blue-section-description {
  color: #FFF;
  font-size: 1.2em;
}
#blue-section-button {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  width: 300px;
  margin: 0 auto;
  cursor: pointer;
}
#blue-section-button span {
  border: 1px solid #FFF;
  text-align: center;
  color: #FFF;
  padding: 20px 20px;
}

<div class="blue-section">
  <div id="blue-info-container">
    <div id="blue-section-title">fdsfdsafsda</div>
    <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
  </div>
  <div id="blue-section-button"><span>MORE ABOUT</span>
  </div>
</div>

http://stackoverflow.com/questions/1232096/how-to-horizontally-center-a-floating-element-of-a-variable-width — hussain, Feb 03 '16 at 05:13

score 2 · Accepted Answer · answered Feb 03 '16 at 05:15

try this. I have slightly modified your css

.blue-section {
                background-color: #9BD0D2;
                height: 500px;
                width: 100%;
                position: relative;
            }
            #blue-info-container {
                top: 20%;
                position: absolute;
                left: 0;
                right: 0;
                width: 70%;
                margin: 0 auto;
                text-align: center;
            }
            #blue-section-title {
                color: #FFF;
                font-size: 1.4em;
                padding-bottom: 75px;
            }
            #blue-section-description {
                color: #FFF;
                font-size: 1.2em;
            }
            #blue-section-button {
                position: absolute;
                bottom: 20%;
                left: 0;
                right: 0;
                text-align: center;
            }
            #blue-section-button span {
                border: 1px solid #FFF;
                text-align: center;
                color: #FFF;
                padding: 20px 20px;
                display: inline-block;
                cursor: pointer;
            }

<div class="blue-section">
            <div id="blue-info-container">
                <div id="blue-section-title">fdsfdsafsda</div>
                <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
            </div>
            <div id="blue-section-button"><span>MORE ABOUT</span>
            </div>
        </div>

Perfect! I appreciate the help! – Paul Feb 03 '16 at 05:19 — Paul, Feb 03 '16 at 05:19

score 0 · Answer 2 · answered Feb 03 '16 at 05:23

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>




</head>

<body>

  <div class="wrapper">

  <div class="blue-section">
  <div id="blue-info-container">
    <div id="blue-section-title">fdsfdsafsda</div>
    <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
  </div>
  <div id="blue-section-button"><span>MORE ABOUT</span>
  </div>
</div>


</div>

</body>

</html>
















.blue-section {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    height: 250px;
    top: 0;
    bottom: 0;
}


#blue-info-container {

}
#blue-section-title {
  color: #FFF;
  font-size: 1.4em;
  padding-bottom: 75px;
}
#blue-section-description {
  color: #FFF;
  font-size: 1.2em;
}
#blue-section-button {

}
#blue-section-button span {
  border: 1px solid #FFF;
  display:inline-block;
  text-align: center;
  color: #FFF;
  padding: 20px 20px;
}

.wrapper
{  background-color: #9BD0D2;
  height: 500px;
  width: 100%;
  position: relative;

    }

score 0 · Answer 3 · answered Feb 03 '16 at 05:43

0

Try this

#blue-section-button{text-align:center;}

answered Feb 03 '16 at 05:43

SarangaR

744
6
18

@SnareChops This actually is a valid attempted answer. This post should not have been flagged and should not be recommended for deletion in the LQPRQ. See: [You're doing it wrong: A plea for sanity in the Low Quality Posts queue](http://meta.stackoverflow.com/q/287563) and [Your answer is in another castle: when is an answer not an answer?](http://meta.stackexchange.com/q/225370) – Feb 04 '16 at 01:42
@TinyGiant You are correct. I think this was one of those posts where I second guessed my selection as soon as I clicked the button and quickly looked for a back button as I remembered that there isn't one. I can delete my comment as this *is* a valid attempt. – SnareChops Feb 04 '16 at 01:48

score 0 · Answer 4 · answered Feb 03 '16 at 05:59

Please find the below code and working jsfiddle that illustrates the desired behavior.

In short -: add align='center' in the div of the button. And remove the width: 300px; margin: 0 auto; from the CSS of the desired button.

HTML

 <div class="blue-section">
     <div id="blue-info-container">
         <div id="blue-section-title">fdsfdsafsda</div>
         <div id="blue-section-description">fnderjfgnreopn nfdewjfn wreo fnewjif njkfkew nji fn jekwf njfedww nfdefnewdi fewjq nffemdwkom fdmkwf mfewmkqoffewkqo fnfew klf</div>
     </div>
     <div id="blue-section-button" align='center'>
         <span>MORE ABOUT</span>
     </div>
 </div>

CSS

.blue-section {
  background-color: #9BD0D2;
  height: 500px;
  width: 100%;
  position: relative;
}
#blue-info-container {
  top: 20%;
  position: absolute;
  left: 0;
  right: 0;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
#blue-section-title {
  color: #FFF;
  font-size: 1.4em;
  padding-bottom: 75px;
}
#blue-section-description {
  color: #FFF;
  font-size: 1.2em;
}
#blue-section-button {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  cursor: pointer;
}
#blue-section-button span {
  border: 1px solid #FFF;
  text-align: center;
  color: #FFF;
  padding: 20px 20px;
}

How to center a div horizontally with a varying width

4 Answers4