Div is not fully centered

Question

0.00/5 (No votes)

See more:

, +

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 22-Jul-21 2:35am

nkm00e

Updated 6-Sep-21 0:27am

v2

Add a Solution

1 solution

Add a Solution

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

Richard Deeming · Answer 1 · 2021-09-06T00:27:00

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[^]

Div is not fully centered

1 solution

Solution 2

Add your solution here

Preview 0

Div is not fully centered

1 solution

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us