I am a beginner in CSS and have been experimenting with various solutions from Stack Overflow, but so far none of them seem to be working for my specific case.
Below is the parent div code from an existing application where I cannot control the inline style, hence why I used !important:
element.style {
display: block;
height: 662px;
width: 1460px;
}
#ModalScroll{
position:fixed !important;
top:0;
left:0;
z-index:1001;
height:1px;
width:1px;
overflow:hidden;
display:none;
font-size:100%;
text-align:center;
}
Child div code:
element.style {
display: block;
left: 470px;
margin-top: 150.5px;
top: 315px;
width: 500px;
}
.ModalDialog{
border:1px solid #3C4749;
background-color:#FFF;
margin:0 auto 0 auto;
display:none;
position:absolute !important;
font-size: 12px;
top: 0px !important;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
The width of the div can vary, and it is perfectly centered vertically, however, I am facing challenges in centering it horizontally.