将所有内容对齐到中心

Question

我不是网页设计师，但我制作了一个网站，但我遇到了一些可能很容易的事情。无论屏幕尺寸如何，我如何将所有内容对齐到中心。在这种情况下，在 Scroll 组件中，我返回一个 Post 组件，该组件返回一个 react-bootstrap Thumbnails，我想在 Scroll 组件中对齐中心（想象将引导卡与中心对齐）。任何帮助将不胜感激。

//发布组件

<Thumbnail className = "post">
<img src="https://robohash.org/abc"></img>
<h3>facemash user</h3>
<div>
    <ButtonGroup>
        <Button bsStyle = 'success' bsSize="small">
            <Glyphicon glyph="thumbs-up" /> Clap
        </Button>
        <Button bsStyle = 'info' bsSize="small">
            <Glyphicon glyph="edit" /> Comment
        </Button>
        <Button bsStyle = 'danger' bsSize="small">
            <Glyphicon glyph="share" /> Share
        </Button>
    </ButtonGroup>
</div>
</Thumbnail>

//滚动组件

<div className = "scroll">
    {props.children}
</div>

//主要组件

    <Scroll> 
        <Post/> // these should centre align
        <Post/>
        <Post/>
    </Scroll>

//所有CSS样式

/*Main*/

.Main{
    min-height: 98%;
    text-align: center;
}

/*Scroll Component*/

.scroll{
    /*background: linear-gradient(to right, yellow, lime);*/
    min-height: 100%;
    font-size: 24px;
    overflow-y:scroll;
    text-align: center;
    border:4px solid  pink;
}

/*Post*/

.post{
    justify-content: center;
    text-align: center;
    min-width: 320px;
    max-width: 400px;
}

Answer 1

如果您使用 flex-box，您应该设置父容器一些样式以对齐子中心：

.scroll{
 /*background: linear-gradient(to right, yellow, lime);*/
 min-height: 100%;
 font-size: 24px;
 overflow-y:scroll;
 text-align: center;
 border:4px solid  pink;
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 align-content: center;
 text-align: center;
}