如何将不同屏幕尺寸的 div 居中？
How to center a div with varying screen sizes?
我的容器中有一组 <div>s 水平排列，我希望将我的外部容器 <div> class 与我的其余代码居中web page（方形空间）。
我已经 CodePen 重新创建页面，但我似乎仍然无法将我的 outer-container 置于具有不同屏幕尺寸的 Main-content 部分的中心。
非常感谢任何帮助！
<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">
.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">
.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">
.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>
我访问了您的网页并检查了页面源代码。 .outer-container 中的 padding: 100px 似乎破坏了显示。你必须添加像 margin-left: -100px 这样的负左边距来重新定位你的 div.
无论如何，您可能想要重构您的代码并将图像移动到更大的父级 div 然后在那里应用填充。
我的容器中有一组 <div>s 水平排列，我希望将我的外部容器 <div> class 与我的其余代码居中web page（方形空间）。
我已经 CodePen 重新创建页面，但我似乎仍然无法将我的 outer-container 置于具有不同屏幕尺寸的 Main-content 部分的中心。
非常感谢任何帮助！
<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">
.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">
.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">
.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>
我访问了您的网页并检查了页面源代码。 .outer-container 中的 padding: 100px 似乎破坏了显示。你必须添加像 margin-left: -100px 这样的负左边距来重新定位你的 div.
无论如何，您可能想要重构您的代码并将图像移动到更大的父级 div 然后在那里应用填充。