After extensive research, I discovered that setting a width allows you to center a div using margin: 0 auto along with left: 0;, right: 0, and position: absolute. However, all the examples I found had a specified width.
In my specific case, I need to center a button with a cursor: pointer;, so I can't set a width because that would change the cursor. Moreover, since it's a link, setting a width would further complicate things.
So, my question is - how can you center a div with an absolute value without defining 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>