Css 使用React引导将元素垂直居中

我想垂直中心和中心对齐元素使用引导，但无法实现它。我使用react引导col和row组件

这是我的代码沙盒：

这是我的密码：

import React, { PureComponent } from "react";

import {
  ButtonGroup,
  Classes,
  H4,
  Icon,
  Intent,
  Tooltip
} from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { Box } from "@rebass/grid";
import { Container, Row, Col } from "react-bootstrap";
import cx from "classnames";
import "styled-components/macro";

import ExportSVG from "./export.svg";

import UploadFile from "./UploadFile";

const getFileExtension = file => {
  return file && file[0].name.split(".")[file[0].name.split(".").length - 1];
};

const INITIAL_STATE = {
  error: null,
  isBusy: false,
  file: null,
  generatedFile: undefined,
  fileTypeError: false
};

const tooltipContent = "Export this scenario data into an existing Excel file";

class ExportForm extends PureComponent {
  state = INITIAL_STATE;

  render() {
    const { scenarioId } = this.props;
    const { isBusy, file, generatedFile } = this.state;
    return (
      <Container style={{ backgroundColor: "red" }}>
        <Row className="justify-content-between">
          <Col xs={4}>
            <ButtonGroup>
              <Tooltip content={tooltipContent}>
                <Icon intent={Intent.PRIMARY} icon={IconNames.HELP} />
              </Tooltip>
              <H4>
                <Box as="span" mx={2}>
                  Export
                </Box>
                <img alt="" src={ExportSVG} />
              </H4>
            </ButtonGroup>
          </Col>
          <Col xs={4}>
            {!file && !generatedFile && (
              <Box>
                <input
                  type="file"
                  id="uploadFileExport"
                  accept=".xlsm"
                  onChange={this.handleFileChange}
                />
                <label
                  htmlFor="uploadFileExport"
                  className={cx(Classes.BUTTON, Classes.INTENT_PRIMARY)}
                >
                  <span>Select file</span>
                </label>
              </Box>
            )}
          </Col>
        </Row>
        {file && (
          <Box mt={1}>
            <UploadFile
              isBusy={isBusy}
              fileExtension={".xlsm"}
              file={file}
              handleCancelClick={this.handleCancelClick}
              uploadButtonText={"Export"}
              uploadIcon={"cloud-download"}
              fileUploadData={this.handleExport}
              handleFileChange={this.handleFileChange}
              uploadComment={`Upload for export from ${scenarioId}`}
            />
          </Box>
        )}
      </Container>
    );
  }

  handleCancelClick = () => this.setState(INITIAL_STATE);

  handleFileChange = event => {
    const { files } = event.currentTarget;

    if (getFileExtension(files) === "xlsm") {
      this.setState({ file: files && files[0], fileTypeError: false });
    } else {
      this.setState({ fileTypeError: true, file: null });
    }
  };
}

export default ExportForm;

这就是我所拥有的：

图标、文本应与容器左对齐并居中对齐，按钮应与容器右对齐

---

请给我一些建议。感谢您的帮助。

这是沙盒链接

您需要在行上添加高度，并在中心添加对齐项

参考：

更新：BS就是这样做的

更新：

---

您可以从这里获得帮助

这是沙盒链接

您需要在行上添加高度，并在中心添加对齐项

参考：

更新：BS就是这样做的

更新： 您可以从这里获得帮助

这是我的解决方案

我为红色部分提供了垂直居中的内容，使用flexbox并在其周围添加了一些填充物

因为您使用的是引导，所以我使用了内置的引导css类。

这是我的解决方案

我为红色部分提供了垂直居中的内容，使用flexbox并在其周围添加了一些填充物

---

因为您使用的是引导，所以我使用了内置的引导css类。

我们可以不使用高度吗？我们可以不使用高度吗？

<Row style={{ height: "100px" }} className="align-items-center">
  <Col> </Col>
  <Col xs="auto"> </Col>
</Row>