Menu
I have 3 divs in page. 1st for logo, second for contents which I have vertically centered and last for button which will then let user navigate to another section/page.
I am trying to put button below centered div but somehow it is appearing below logo.
I would like this page to be displayed appropriately on both desktop and different mobiles hence I am not using fixed bottom margin.
Please let me know if I am missing something.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
.center-div
{
position: absolute;
top: 50%;
left:50%;
margin-right:-50%;
transform: translate(-50%,-50%);
width:100%;
border: 3px solid red;
background-color:peachpuff;
text-align:center;
}
</style>
</head>
<body>
<div>
<div>
<h1>Logo</h1>
</div>
<div class="center-div">
<h1>Title of paragraph</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
</div>
<div style="text-align:center;">
<a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a>
</div>
<div>
</body>
</html>
295
asked Jan 29 '26 08:01
You can achieve this without positioning.
Use display:table for container and display: table-cell; vertical-align: middle for content.
Also you must to set height 100% for html/body and container elements.
P.S. Display table and table-cell will not work on IE7. But this browser is a history. Use it freely. Here is good article about this (don't be decieved by it's title).
And this is the code you need:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
html,body {height: 100%;}
.container{
display: table;
height: 100%;
}
.content-wrapper{
display: table-cell;
vertical-align: middle;
}
.link{
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Logo</h1>
</header>
<div class="container">
<div class="content-wrapper">
<div>
<h2>Title of paragraph</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
</div>
<div class="link">
<a target="_blank" href="" class="btn btn-primary" style="text-decoration:none;">Explore More »</a>
</div>
</div>
</div>
</body>
</html>
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
