Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am trying to center the div on the webpage but the div will not be fully centered.
This is how the page looks like : Imgur: The magic of the Internet[^] .

This is the html:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>

<div class="flipbook-viewport" style="display: inline-block;">
	<div class="container" style="display: inline-block;">
		<div class="flipbook" style="display: inline-block;">
			<div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
			<div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
      <div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>
		</div>
	</div>
</div>

<div class="buttons" style="display: inline-block;">
						  <button type="button" onclick="thePreviousPage()" class="button">Previous</button>
              <button type="button" onclick="theHomePage()" class="button">Home</button>
						  <button type="button" onclick="theNextPage()" class="button">Next</button>
</div>

<script type="text/javascript">

	// Create the flipbook

  $('.flipbook').turn({

			// Elevation

			elevation: 50,

			// Enable gradients

			gradients: true,

			// Auto center this flipbook

			autoCenter: true

	});

  function thePreviousPage()
  {
    $('.flipbook').turn('previous');
  }

  function theHomePage()
  {
    $('.flipbook').turn('page',1);
  }

  function theNextPage()
  {
    $('.flipbook').turn('next');
  }

</script>

</body>
</html>


This is the css:
CSS
body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
  margin-right: -50%;
}

.flipbook-viewport .container{
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  height: 90%;
  width: 90%;
}

.flipbook-viewport .flipbook{
	width:90%;
	height:90%;
  top: -50%;
  left: -50%;
}

.flipbook
{
  transform: translate(-50%, -50%);
}

.flipbook-viewport .page{
	width:461px;
	height:600px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

.button{
  position: relative;
	align-items: center;
}


Edit: The image is blurred out for privacy reasons.

What I have tried:

I tried to use flexbox justify content, but the div will still not be fully centered.
Posted
Updated 6-Sep-21 0:27am
v2

1 solution

Take it back to basics. To center an element in the viewport, you can use grid layout:
HTML
<div class="center-me">
    <h1>Some content...</h1>
    <p>Stuff here...</p>
</div>
CSS
html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
body {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}
.center-me {
    place-self: center;
}
Demo[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900