javascript - 使用 styled-components 将容器中的内容居中

Question

我正在构建一个 netflix 克隆，在页脚所在的底部，我似乎无法将其居中。我使用 styled-components 作为我在 React 中做 CSS 的方式。我希望容器中的全部内容相对于屏幕居中。我得到了行和列之间的间距都很好而且均匀。

页脚容器.js

import Footer from '../components/footer';

export default function FooterContainer() {
    return (
        <Footer>
            <Footer.Row>
                <Footer.Column>
                    <Footer.Link href='#'>FAQ</Footer.Link>
                    <Footer.Link href='#'>Investors</Footer.Link>
                    <Footer.Link href='#'>Ways to Watch</Footer.Link>
                    <Footer.Link href='#'>Originals</Footer.Link>
                </Footer.Column>
            </Footer.Row>
            <Footer.Row>
                <Footer.Column>
                    <Footer.Link href='#'>FAQ</Footer.Link>
                    <Footer.Link href='#'>Investors</Footer.Link>
                    <Footer.Link href='#'>Ways to Watch</Footer.Link>
                    <Footer.Link href='#'>Originals</Footer.Link>
                </Footer.Column>
            </Footer.Row>
            <Footer.Row>
                <Footer.Column>
                    <Footer.Link href='#'>FAQ</Footer.Link>
                    <Footer.Link href='#'>Investors</Footer.Link>
                    <Footer.Link href='#'>Ways to Watch</Footer.Link>
                    <Footer.Link href='#'>Originals</Footer.Link>
                </Footer.Column>
            </Footer.Row>
            <Footer.Row>
                <Footer.Column>
                    <Footer.Link href='#'>FAQ</Footer.Link>
                    <Footer.Link href='#'>Investors</Footer.Link>
                    <Footer.Link href='#'>Ways to Watch</Footer.Link>
                    <Footer.Link href='#'>Originals</Footer.Link>
                </Footer.Column>
            </Footer.Row>
        </Footer>
    )
}

样式/footer.js

import styled from 'styled-components/macro';

export const Container = styled.div`
    display: flex;
    padding: 70px 0;
    margin: auto;
    max-width: 1100px;
    flex-direction: row;
    @media (max-width: 1000px) {
        padding: 70px 30px;
    }
`;

export const Column = styled.div`
    display: flex;
    flex-direction: column;
    text-align: left;
`;

export const Row = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-gap: 15px;
    @media (max-width: 1000px) {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
`;

export const Link = styled.a`
    color: #757575;
    margin-bottom: 20px;
    font-size: 13px;
    text-decoration: none;
`;

export const Title = styled.p`
    font-size: 16px;
    color: #757575;
    margin-bottom: 40px;
`;

export const Text = styled.p`
    font-size: 13px;
    color: #757575;
    margin-bottom: 40px;
`;

export const Break = styled.div`
    flex-basis: 100%;
    height: 0;
`;

标签： javascriptcssreactjsstyled-components