How to center align a button inside a div with Absolute position?

Question

I have an outer div with relative position, inside it I have a inner div with absolute position, because I want the inner div sticking to the bottom of the outer div (bottom: 0).

Now how to center align a button inside the inner div?

JSX:

            <Card>
                <CardTitle>{voucher.voucherTitle}</CardTitle>
                <CardContent>{voucher.voucherDesc}</CardContent>
                <CardFooter>
                    <RedeemBtn>{`Redeem`}</RedeemBtn>
                </CardFooter>
            </Card>

Styled components:

const Card = styled.div`
    width: 312px;
    max-width: 100%;
    height: 200px;
    box-sizing: border-box;
    justify-content: center;
    background-image: linear-gradient(#fff calc(100% - 50px),hsla(0,0%,93.3%,.4));
`

const CardFooter =  styled.div`
    position: absolute;
    bottom: 0;
    color: #e40000;
    width: 100%;
    align-content: center;
`
const RedeemBtn = styled.button`
    margin: 0 auto;
`

`display:flex; justify-content: center` on the `CardFooter`, perhaps? — Muhammad Talha Akbar, Jun 26 '20 at 06:39

Cristian Sarghe · Answer 1 · 2020-06-26T06:57:05.850

-1

Apply the following to the inner container (button's parent):

width: 100%;
display: flex;
justify-content: center;

This will make your inner container center its content and cover whole outer container width.

edited Jun 26 '20 at 06:57

answered Jun 26 '20 at 06:51

Cristian Sarghe

782
6
15

score -1 · Answer 2 · edited Jun 26 '20 at 09:34

-1

.card{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5em;
}

Here height will adjust your center code.

edited Jun 26 '20 at 09:34

Ryan M

18,333
31
67
74

answered Jun 26 '20 at 07:18

Ayomi Gunasekara

61
3

How to center align a button inside a div with Absolute position?

2 Answers2