html - 如何在页面调整大小时保持 div 居中？

Question

一般来说，我知道如何解决主题行中出现的上述问题。只需指定 div 宽度并将边距设置为自动右对齐。好吧，问题在于我在网站中包含的特定 div，它在调整页面大小时保持集中位置，就像我希望的那样，但是一旦我在其中包含两个子 div，一个定位在左边，另一个在右边。我将包含所讨论的 3 个 div 的 HTML 和 CSS。我将排除左右子 div 的内容，因为它们与此问题无关。

html

            <div class ="page_content">   
                       <div class ="page_content_left">
                       </div> <!--closes page content left-->
                       <div class = "page_content_right">
                       </div> <!--closes page content right-->
            </div> <!--closes page content-->

CSS

    .page_content{
      margin:0px  auto;
      width:1000px;
      height:590px;
      position:relative;
      top:50px;
      -moz-border-radius:8px; 
      border- radius:8px; border:none;
    }


    .page_content_left{
       position:absolute;
       top:0px;
       left:0px;
       width:35.0%;
       min- height:590px;
       -moz-border-radius:8px; 
       border-radius:8px;

    /* fallback */
        background: #000000;
        /* Mozilla: */
        background: -moz-linear-gradient(top, #100f0f, #000000);
        /* Chrome, Safari:*/
        background: -webkit-gradient(linear,
                    left top, left bottom, from(#100f0f), to(#000000));
         /* MSIE */
        filter: progid:DXImageTransform.Microsoft.Gradient(
                    StartColorStr='#100f0f', EndColorStr='#000000', GradientType=0);
        /*opera*/
        background-image: -o-linear-gradient(top,#100f0f,#000000); 

    }

    .page_content_right{position:absolute;top:0px;left:351px;width:64.9%;min- height:590px;-moz-border-radius:8px; border-radius:8px;

    /* fallback */
        background: #000000;
        /* Mozilla: */
        background: -moz-linear-gradient(top, #100f0f, #000000);
        /* Chrome, Safari:*/
        background: -webkit-gradient(linear,
                    left top, left bottom, from(#100f0f), to(#000000));
        /* MSIE */
        filter: progid:DXImageTransform.Microsoft.Gradient(
                    StartColorStr='#100f0f', EndColorStr='#000000', GradientType=0);
        /*opera*/
        background-image: -o-linear-gradient(top,#100f0f,#000000);
    }

有问题的页面可以在这个 url 找到:

creativewizz.com/testimonials_page.php

主父 div (page_content) 有不可见的边框，左右子 div 分别是标题为“推荐”和“写推荐”的 div。当包含子 div 时，不仅它们的父 div 不会集中在调整大小上，而且页脚 div 也不会集中在顶部由白色水平线包围的位置。我该如何解决这个问题？？？

Answer 1

假设你的 div 有 100px 的高度和 200px 的宽度，这里有一个类放在中心，无论如何:

   .centered {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }