想创建一个透明的fade in和fade out弹出窗口使用css显示屏幕的中心。我已经创建了一个，但总是显示屏幕的左下角。有人能请建议？

尝试了组件方式的React，但转换不适用于弹出窗口

const Popup = () => {

    const style = {
      position: 'absolute',
      left: '50%',
      top: '50%',
      transform: 'translate(-50%,-50%)',
      width: '250px',
      height: '100px',
      borderRadius: '5px',
      backgroundColor: '#6d418c',
      opacity: 0.5,
      transition: 'all 250ms linear 2s'
    }
  
    return (
      <div>
        {createPortal(
          <div style={style} className={`alert alert-success ${ showLatestMailAlert ? 'alert-shown' : 'alert-hidden'}`}
            onTransitionEnd={() => setShowLatestMailAlert(false)}>
            <span class="popuptext" id="myPopup"><strong>Success!</strong> This child is placed in the document body.</span>
          </div>,
          document.body
        )}
      </div>
    ) 
  }

 return (
    <div id="App">
        <div className='parent'>
             <div className='adminSection'>
                <h1>Create a new blog</h1>
                <div className='row'>
                    <div className='createBlogSection'>

                        <div data-color-mode="dark" className='container'>
                            <MDEditor
                                className='reactEditorArea'
                                id="blogdetails"
                                name="blogdetails"
                                value={blogValue}
                                onChange={setBlogValue}
                            />
                            {/* <MDEditor.Markdown className='reactEditorOutput' source={blogValue} style={{ whiteSpace: 'pre-wrap' }} /> */}
                        </div>
                        <form>
                        <div className='row'>
                            <div className='tagsName'>
                                <label>Tags:</label>
                                <input
                                    type="text"
                                    id="tags"
                                    name="tags"
                                    placeholder="enter tags"
                                    value={tagValue}
                                    onChange={(e) => setTagValue(e.target.value)}     
                                />
                            </div>
                            {/* <span className="validationmsg">
                                {errors.tags && errors.tags.type === "required" && <span>Tag is required !</span>}
                                {errors.tags && <span>{errors.tags.message}</span>}
                            </span> */}
                        </div>
                        </form>                 
                        <label>
                         <span className="adminSuccessMsg">{helperText}</span>
                        </label>
                        <div className='row'>
                            <div className='submitSection'>
                                <input type="submit" onClick={onSubmit} className="submitBtn" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            
        </div>
       <Popup/>
    </div> 
)