Модальный полноэкранный режим выровнен по левому краю

Question

Мой полноэкранный режим выровнен по левому краю. Центрированная собственность не решает ее. У меня есть ряд сетки, которая динамически отображает серию карт. С каждой картой связан модал, поэтому, когда вы щелкаете по карте, открывается модал с информацией с карты.

Это сетка, в которой я ее отображаю

<Grid.Column key={this.props.sensorid} width={4}>
        <Card
          onClick={() => {
            this.setState({ modalOpen: true });
          }}
          color={color}
          header={String(porce) + " %"}
          description={this.props.sensorname}
          meta={nivelUno + " mm"}
        />

          <ModalSensor
            sensorWell={this.props.sensorWell}
            sensorName={this.props.sensorConPrefijo}
            sensorId = {this.props.sensorid}
            modalOpen={this.state.modalOpen}
            handleClose={() => {
              this.setState({ modalOpen: false });
            }}
          />

      </Grid.Column>

Это модальное значение

export default class ModalSensor extends Component {
  render() {
    return (
      <div>
      <Modal
        centered={true}
        open={this.props.modalOpen}
        onClose={this.props.handleClose}
        closeOnEscape={true}
        size={"Fullscreen"}
      >
        <Modal.Header>Nivel del sensor {this.props.sensorName}</Modal.Header>
        <Modal.Content>

            <Sensor sensorwell={this.props.sensorWell} sensorcodigo={this.props.sensorName}/>

        </Modal.Content>
        <Modal.Actions>
          <Button
            inverted
            color="orange"
            type="button"
            icon="checkmark"
            labelPosition="right"
            onClick={this.props.handleClose}
            content="Cerrar"
          />
        </Modal.Actions>
      </Modal>
      </div>
    );
  }
}

Answer 1

Я также сталкивался с ошибкой этого типа макета, но я исправил ее, добавив пользовательский класс в <div class="ui fullscreen modal transition visible active" />

.customClass {
  left: 50%;
  transform: translateX(-50%);
}

Answer 2

это распространенная проблема, когда используется более одной библиотеки css, просто осмотрите свой элемент с помощью инструмента разработки браузера и попытайтесь выяснить это, либо не обращайте на это внимания. Никто не может вам помочь (вероятно), потому что это проблема css а у тебя здесь нет css.

Удачи, мужик.