Question

我有以下CSS（在react material-ui withStyles方法中定义）：

const styles = (theme: Theme) => {
    return ({
        display: {
            transition: theme.transitions.create('transform')
        },
        displayHighlight: {
            transform: 'translateX(50%)',
            position: 'fixed',
            top: 0,
            zIndex: 10,
            transition: theme.transitions.create('transform')
        }
    }) as any;
}

CSS被应用于在虚拟反应的砖石网格中显示的卡片，这就是卡片渲染功能的作用：

return <div className={this.state.expanded ? this.props.classes.displayHighlight : this.props.classes.display}>
    <Card style={{ width: this.props.columnWidth }}>
        <PreviewRenderer columnWidth={this.props.columnWidth}
            embedVideo={this.props.submission.embedVideo}
            imagePreview={this.props.submission.preview} />
        <CardHeader
            style={{ textAlign: 'left' }}
            title={this.props.submission.title}
        />

        <CardContent>
            <div style={{ width: '40px', float: 'right' }}>
                {this.props.submission.id && <RatingBar submissionId={this.props.submission.id.toString()} />}
            </div>

            <Button onClick={() => this.setState({ expanded: !this.state.expanded })}>Expand</Button>
        </CardContent>
    </Card>
</div>

当有人点击“展开”时，我想放大卡片并将其移动到浏览器窗口的中央。

这是完全可能的，还是通过将屏幕尺寸传递给已定义的CSS使其移动到我想要的位置？

Answer 1

是的，可以使用CSS（在页面中，与整个浏览器窗口不同）在页面中居中放置元素。

我不喜欢Reactjs，但是您可以尝试通过以下方式更改代码：

const styles = (theme: Theme) => {
    return ({
        display: {
            transition: theme.transitions.create('transform')
        },
        displayHighlight: {
            transform: 'translate(-50%,-50%)',
            position: 'fixed',
            top: 50%,
            left: 50%,
            zIndex: 10,
            transition: theme.transitions.create('transform')
        }
    }) as any;
}

您可以使用以下CSS属性将页面中的元素居中放置：

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

这是将容器的左上角居中于屏幕中心，然后使用transform: translate(-50%,-50%)将元素的中心移至其左上角之前的位置：在页面的中心。

困难的部分是要实现从最初的position: relative到position: fixed的平稳过渡。

CSS将位置转换到屏幕中心吗？

1 个答案: