절대 위치로 div 내부의 button을 중앙에 정렬하는 방법은 무엇입니까? [복제]

질문

This question already has answers here:

Flexbox: center horizontally and vertically (12 answers)

CSS center text (horizontally and vertically) inside a div block (26 answers)

How to center a button within a div? (14 answers)

Closed last month.

내부 div가 외부 div의 맨 아래에 고정되기를 원하기 때문에 상대 위치가있는 외부 div가 있고 내부에 절대 위치가있는 내부 div가 있습니다 (하단 : 0).

이제 내부 div 안에 button을 가운데 정렬하는 방법은 무엇입니까?

JSX :

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

스타일 component :

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;
`

답변1

내부 container (button의 부모)에 다음을 적용합니다.

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

이렇게하면 내부 container가 내용물 중심에 있고 전체 외부 container width를 덮을 수 있습니다.

답변2

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

여기에서 높이는 센터 코드를 조정합니다.

 

 

 

 

출처 : https://stackoverflow.com/questions/62589275/how-to-center-align-a-button-inside-a-div-with-absolute-position