html - 无法使用带有样式组件的 flexbox 居中页面

Question

我正在努力在 Next.js 应用程序中使用带有样式组件的 flexbox 将我的页面居中。有任何想法吗？

这是我的博客组件

import ReactMarkdown from 'react-markdown'
import BlogPostStyles from './styles/BlogPostStyles';

const BlogComponent = ({ data: { post: { fields: { title, body } } } }) => {
    return (
        <BlogPostStyles>
            <article>
                <ReactMarkdown>{body}</ReactMarkdown>
            </article>
        </BlogPostStyles>
    );
};

export default BlogComponent;

这是我的 BlogStyles 组件

import styled from 'styled-components';
    
const BlogPostStyles = styled.div`
    max-width: 1200px;
    display: flex;
    justify-content: center;
`;
    
export default BlogPostStyles;

标签： htmlcssreactjsnext.jsstyled-components

Answer 1

添加align-items:center

尝试添加width:100%

尝试添加height:100vh

至BlogPostStyles

这是更多的 CSS 错误，而不是 next.js :)