居中对齐模态 ReactJS

Question

我正在尝试在 ReactJS 中设置模式样式并需要一些帮助。我在尝试居中对齐内容模式时遇到困难。此外，在设置模式样式时，是否可以分配一个类名并在 css 页面中设置样式？我试过这样做，但没有用。所以我只是决定做内联样式，但我不能居中对齐我的模态。

            <button onClick={()=> SEOsetModalIsOpen(true)} className="viewmore">
                View More
                <ArrowIcon className="arrowright"/>
            </button>
            <Modal
              isOpen={SEOmodalIsOpen}
              shouldCloseOnOverlayClick={true}
              onRequestClose={()=>SEOsetModalIsOpen(false)}
              style={{
                  overlay: {
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    opacity: 1,
                  },

                  content: {
                    position: 'absolute',
                    width: '500px',
                    height: '300px',
                    top: '200px',
                    left: '500px',
                    right: '500px',
                    bottom: '200px',
                    border: '1px solid #ccc',
                    background: 'blue',
                    overflow: 'auto',
                    WebkitOverflowScrolling: 'touch',
                    borderRadius: '4px',
                    outline: 'none',
                    padding: '20px'
                  }
              }}
              >
              <h2>Search Engine Optimisation</h2>
              <p>Hello World</p>
              <button onClick={()=>SEOsetModalIsOpen(false)}>Close</button>
            </Modal>
            </div>

Answer 1

您可以设置

而不是设置 top、left、bottom、right 来居中您的内容

{
  display: "flex",
  justifyConent: "center",
  alignItems: "center",
}

Answer 2

您可以使用它以绝对定位居中：

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

居中对齐模态 ReactJS

Center Align Modal ReactJS

css

reactjs

modal-dialog

popup

center-align