다양한 화면 크기로 div를 가운데에 배치하는 방법은 무엇입니까?

Question

내 컨테이너에 수평 배열로 <div> 세트가 있는데, 내 web page (Squarespace)의 나머지 코드와 함께 내 외부 컨테이너 <div> 클래스를 센터링하려고합니다.

CodePen 페이지를 다시 만들었지 만 화면 크기가 다양한 섹션에 내 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처럼 보이지 않는 것 같습니다. div의 위치를 ​​변경하려면 margin-left: -100px과 같이 음수의 왼쪽 여백을 추가해야합니다.

어쨌든 코드를 리팩토링하고 더 큰 부모 div으로 이미지를 이동 한 다음 패딩을 적용 할 수 있습니다.