如何以变化的屏幕尺寸居中div？

Question

我在容器中水平放置了一组<div>的阵容，我正在寻找以我的web page（Squarespace）为中心将我的外容器<div>类与其余代码对齐。

我编写了一个CodePen重新创建页面，我仍然无法以Main-content部分为中心在outer-container范围内调整屏幕大小。

任何帮助，非常感谢！

<section class="Main-content" data-content-field="main-content" id="yui_3_17_2_2_1507859188217_558"> 
<div class="sqs-layout sqs-grid-12 columns-12 sqs-frontend-overlay-editor-widget-host" data-type="page" data-updated-on="1507857777989" id="page-59cab354bebafb4216478596"> 
    <div class="row sqs-row" id="yui_3_17_2_2_1507859188217_669"> 
     <div class="col sqs-col-12 span-12" id="yui_3_17_2_2_1507859188217_668"> 
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_22_1507595367220_25824"> 
       <div class="sqs-block-content"> 
        <h1 align="center">Choose your subscription plan</h1> 
       </div> 
      </div> 
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_12_1507852892558_4858"> 
       <div class="sqs-block-content"> 
        <h3 style="text-align:center;color:#0083f5;">Have a MyDietGoal Promotion Code?</h3> 
       </div> 
      </div> 
      <div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1507522278297_5479"> 
       <div class="sqs-block-content"> 



        <div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content; padding: 100px;"> 

         <div class="container container1"> 
          <div class="w-table"> 
           <div class="w-table-cell"> 
            <div class="w-container"> 
             <div class="w-card color-green"> 

              <div class="card-header"> 
               <div class="w-title" style="cursor:default"> 
                <h2><font size="7px">Novice</font></h2> 
               </div> 
               <div class="w-price" style="cursor:default"> 
                $4.99 
                <h3>/ Week</h3> 
               </div> 
               <div class="container-button"> 
                <a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a> 
               </div> 
              </div> 

              <div class="card-content" style="cursor:default"> 
               <div class="w-item" style="cursor:default"> 
                <span>Weekly </span>Meal Plans 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Personal </span>Dietary Assessment and Advice 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
               </div> 
              </div> 

             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

         <div class="container container2"> 
          <div class="w-table"> 
           <div class="w-table-cell"> 
            <div class="w-container"> 
             <div class="w-card color-blue"> 

              <div class="card-header"> 
               <div class="w-title" style="cursor:default"> 
                <h2><font size="7px">Apprentice</font></h2> 
               </div> 
               <div class="w-price" style="cursor:default"> 
                $9.99 
                <h3>/ Week</h3> 
               </div> 
               <div class="container-button"> 
                <a class="w-button" id="btn2" href="/meal-planner" target="_blank">Sign up </a> 
               </div> 
              </div> 

              <div class="card-content" style="cursor:default"> 
               <div class="w-item" style="cursor:default"> 
                <span>Weekly </span>Meal Plans 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Personal </span>Dietary Assessment and Advice 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
               </div> 
              </div> 

             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

         <div class="container container3"> 
          <div class="w-table"> 
           <div class="w-table-cell"> 
            <div class="w-container"> 
             <div class="w-card color-orange"> 

              <div class="card-header"> 
               <div class="w-title" style="cursor:default"> 
                <h2><font size="7px">Advanced</font></h2> 
               </div> 
               <div class="w-price" style="cursor:default"> 
                $14.99 
                <h3>/ Week</h3> 
               </div> 
               <div class="container-button"> 
                <a class="w-button" id="btn3" href="/meal-planner" target="_blank">Sign up </a> 
               </div> 
              </div> 

              <div class="card-content" style="cursor:default"> 
               <div class="w-item" style="cursor:default"> 
                <span>Weekly </span>Meal Plans 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Personal </span>Dietary Assessment and Advice 
               </div> 
               <div class="w-item" style="cursor:default"> 
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a> 
               </div> 
              </div> 

             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

        </div> 

Answer 1

我访问了您的网页并检查了页面源代码。看起来.outer-container中的padding: 100px正在突破显示。您必须添加像margin-left: -100px这样的负左边距，才能重新定位您的div。

不管怎样，你可能需要重构你的代码和图像移动到一个更大的父div然后应用填充那里。