javascript - Div 未完全居中在页面中间

问题描述

我正在使用 turnjs 在网页内创建一个翻书，我想把它放在中间。这就是网页现在的样子：https ://imgur.com/a/fL2YUCP 。

这是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/test.css" />
</head>
<body>

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <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">
                          <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>

这是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;
}

我曾尝试使用 flexbox，调整内容中心，但翻书仍不会完全居中。

这是 turnjs 的文档：http ://www.turnjs.com/turnjs4-api-docs.pdf 。

无论如何要使 div 居中，以便它位于网页的中间？

标签： javascripthtmljquerycssturnjs

javascript - Div 未完全居中在页面中间

问题描述

解决方案

推荐阅读