使用CSS快速居中div的七种方法
<h2>方法一：Flex布局</h2><p>使用Flex布局是最简单的方法之一。只需在父容器中添加 <code>display: flex</code>、<code>justify-content: center</code>和 <code>align-items: center</code>即可实现水平和垂直居中。</p>
<pre><code>.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.flex-box {
background-color: #4caf50;
color: white;
padding: 20px;
font-size: 20px;
}
</code></pre>
<h2>方法二：Margin Auto</h2>
<p>通过设置 <code>margin: auto</code>并指定宽度和高度，可以使元素在其父容器中居中。</p>
<pre><code>.margin-auto {
width: 200px;
height: 100px;
margin: auto;
background-color: #2196f3;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</code></pre>
<h2>方法三：Inline Block</h2>
<p>使用 <code>inline-block</code>和 <code>text-align: center</code>可以实现水平居中。</p>
<pre><code>.inline-block-container {
text-align: center;
height: 100vh;
display: flex;
align-items: center;
}
.inline-block-box {
display: inline-block;
background-color: #ff9800;
padding: 20px;
}
</code></pre>
<h2>方法四：绝对定位 + Transform</h2>
<p>结合绝对定位和 <code>transform</code>属性，可以实现精确的居中效果。</p>
<pre><code>.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #e91e63;
padding: 20px;
}
</code></pre>
<h2>方法五：Grid布局</h2>
<p>使用CSS Grid布局，可以轻松实现居中。</p>
<pre><code>.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.grid-item {
background-color: #673ab7;
padding: 20px;
}
</code></pre>
<h2>方法六：Table布局</h2>
<p>利用表格布局的特性，也可以实现居中效果。</p>
<pre><code>.table-container {
display: table;
width: 100%;
height: 100vh;
text-align: center;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
.table-content {
background-color: #3f51b5;
padding: 20px;
margin: 0 auto;
}
</code></pre>
<h2>方法七：相对定位 + Transform</h2>
<p>结合相对定位和 <code>transform</code>属性，实现灵活的居中。</p>
<pre><code>.relative-container {
position: relative;
height: 100vh;
background-color: #f0f0f0;
}
.relative-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ff5722;
padding: 20px;
}
</code></pre>
<h2>结论</h2>
<p>以上就是七种常见的CSS居中方法，每种方法都有其适用场景和优缺点。选择合适的方法，可以大大提高开发效率。</p>
页:
[1]