CSS transform cannot be overwritten

[lorenzulrich]

I would like to center the modal window in the viewport using fixed position, 50% top and left margin and transform: translate(-50%, -50%); for actually centering it. Unfortunately, this configuration {"transform":"translate(-50%, -50%)"} is simply ignored. I'm not sure why.

[xue2han]

You can not use css transform in overwriting the default style of modal,but in modal effect.Just check out the source code in Effect.js and you will know how to do that.So your code may be like this.

const Center = {
      transition : { // transition for the modal window
         property : 'all',
         duration : 300, // millisecond
         timingfunction : 'linear'
      },
      begin : { //beginning style of transition
          'transform': 'translate(-50%, -50%)',
          'opacity': 0
      },
      end : { // end style of transition
        'transform': 'translate(-50%, -50%)',
        'opacity': 1
      }
}