Home › Forums › Design › Page always stay at the center of screen › Reply To: Page always stay at the center of screen
July 27, 2017 at 12:30 am
#257110
webinuseParticipant
I am not quite sure that I have understood you well, but following your link, I did what I thought you wanted. Hope this helps. About centering something horizontally in css almost every time you can do it by giving an element some width (and width can’t be 100%, otherwise how could element have margins), than giving it display:block and margin: 0 auto properties. If you need to center it vertically it’s also easy you can use calc(), as I did.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
display: block;
margin: 0 auto;
}
div.absolute {
position: relative;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
display: block;
margin:calc(50% - 175px) auto;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
This div element has position: relative;
This div element has position: absolute;
</div>
</body>
</html>