Menu
I want to align a div horizontally center and vertically middle of the body of a page.
The css:
.loginBody {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
.loginDiv {
position: absolute;
left: 35%;
top: 35%;
text-align: center;
background-image: url('Images/loginBox.png');
width:546px;
height:265px;
}
And I have this html:
<body class="loginBody">
<form id="form1">
<div class="loginDiv">
</div>
</form>
</body>
Now it is behaving as I want it to, but if I resize the browser, it became completely distorted, perhaps this is because the absolute positioning. I am showing some of the screenshots:
in resized firefox:
in resized chrome:
in resized ie:
in maximized window it is:
Is there any way to solve this problem and achieve this centered alignment using relative positioning?
Thanks.
Edit:
In firefox no scrollbar appears while resizing but it appears in other browsers.
467
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
Use the "inline-block" value of the display property to display the inner <div> as an inline element as well as a block. Set the text-align property on the outer <div> element to center the inner one. This property only works on inline elements.
The easiest way how to center a single element vertically and horizontally is to make it a flex item and set its margin to auto : If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container...
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
Try this:
.loginDiv {
position: absolute;
left: 50%;
top: 50%;
text-align: center;
background-image: url('Images/loginBox.png');
width:546px;
height:265px;
margin-left: -273px; /*half width*/
margin-top: -132px; /*half height*/
}
You move it to the center, and than back left and up by half the dimensions - that will center it even on resize
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
