How to make width auto with position absolute using CSS - html

Question

I'm using position:absolute; now i want to make width auto (as per contents) but because of position:absolute; i'm not able to width:auto;
$('.wishlistMessage').text('Your product added to wishlist')
$('.wishlistMessage').show();
.wishlistMessage{position: fixed;
bottom: 25px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 12px 25px;
display: inline;
width: auto;
text-align: center;
border-radius: 5px;
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wishlistMessage">Your product added to wishlist</div>

Answer 1

An element with position: absolute will fit it's size to the contents. Since you use left: 0 and right: 0 the element is stretched to both sides. Removing one of them (I've removed the right), would fix the problem:
$('.wishlistMessage').text('Your product added to wishlist')
$('.wishlistMessage').show();
.wishlistMessage {
position: fixed;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 12px 25px;
text-align: center;
border-radius: 5px;
z-index: 10000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wishlistMessage">Your product added to wishlist</div>