Cannot center content in div [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
How to center a "position: absolute" element
(31 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
This is my first post. Just as the title says, I am not able to center content inside of a div. Here is my code:
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.fineprint {
font-size: 11px;
position: absolute;
bottom: 25px;
display: table-cell;
vertical-align: bottom;
text-align: center;
}
.couponcontent {
position: absolute;
top: 40%;
bottom: 60%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.scissors {
font-size: 48px;
color: #ed1a24;
position: absolute;
top: 25px;
display: table-cell;
vertical-align: top;
text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
<div class="feature boxed feature-s6">
<div class="fbox-content center coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<div class="couponcontent">
<h2>middle center</h2>
<p>middle center</p>
</div>
<p class="fineprint">bottom center</p>
</div>
</div>
</div>
<!-- End Coupon box -->
Can someone help me center this content inside of the div? It is currently aligned left. Thanks!

Answer 1

You need remove position: absolute and change display from table-cell to block.
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.fineprint {
font-size: 11px;
bottom: 25px;
display: block;
vertical-align: bottom;
text-align: center;
}
.couponcontent {
display: block;
vertical-align: middle;
text-align: center;
}
.scissors {
font-size: 48px;
color: #ed1a24;
top: 25px;
display: block;
vertical-align: top;
text-align: center;
}
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-6">
<div class="feature boxed feature-s6">
<div class="fbox-content center coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<div class="couponcontent">
<h2>middle center</h2>
<p>middle center</p>
</div>
<p class="fineprint">bottom center</p>
</div>
</div>
</div>
<!-- End Coupon box -->

Answer 2

try to simplify your CSS as much as possible otherwise, there will be clashes and things like text-align:center won't work. https://www.w3schools.com/ is a great source when it comes to CSS.
.main{text-align:center}
.coupon {
border-style: dashed;
border-color: black;
min-height: 350px;
}
.couponcontent {
position: absolute;
top: 40%;
bottom: 60%;
}
.scissors {
font-size: 48px;
color: #ed1a24;
position: absolute;
top: 25px;
display: table-cell;
vertical-align: top;
text-align: center;
}
<div class='main'>
<div class="coupon">
<span class="scissors"><i class="fa fa-scissors"></i></span>
<h2>middle center</h2>
<p>middle center</p>
</div>
<p >bottom center</p>
</div>