别再手动调margin了，这5种CSS垂直居中技巧让效率翻倍
<p>日常开发的时候会碰到很多需要居中元素的场景，尤其对于强迫症来说，为了一点点偏差疯狂手调margin（比如我自己），这篇专门讲一下CSS中实现元素水平垂直居中的方法。</p><hr />
<p><strong>直接先上总结：</strong></p>
<ol>
<li>Flex布局：父元素设置 <code>display: flex</code>，<code>justify-content: center</code>，<code>align-items: center</code></li>
<li>Grid布局：父元素设置 <code>display: grid</code>，<code>place-items: center</code></li>
<li>设置绝对定位 <code>position: absolute</code>，<code>top: 50%</code>，<code>left: 50%</code>，<code>transform: translate(-50%, -50%)</code></li>
<li>设置绝对定位 <code>position: absolute</code>，上下左右值设为0，<code>margin: auto</code></li>
<li>（单行文本）设置行高和 <code>text-align: center</code></li>
<li><strong>（仅实现水平居中 ）</strong>（多个内联元素/设置了 <code>display: inline-block</code> 的块级元素）设置 <code>text-align: center</code></li>
</ol>
<p>想看详细介绍的继续往下看：</p>
<hr />
<h4>一、Flex布局（最常用）</h4>
<pre><code>.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 500px; /* 需要定义容器高度 */
}
</code></pre>
<ul>
<li>
<p><strong>适用元素</strong>：块级元素、内联元素（自动转为Flex Item）</p>
</li>
<li>
<p><strong>使用场景</strong>：</p>
<ul>
<li>需要动态内容居中（子元素尺寸未知）</li>
<li>混合布局（例如导航栏同时包含图片和文字）</li>
<li>响应式布局（移动端和PC端通用）</li>
</ul>
</li>
<li>
<p><strong>特点</strong>：<br />
Flex容器会强制所有子元素变为Flex Item，消除块级与内联元素的差异，统一用Flex规则布局。</p>
</li>
</ul>
<h4>二、Grid布局（最高效）</h4>
<pre><code>.parent {
display: grid;
place-items: center; /* 同时实现水平垂直居中 */
height: 500px;
}
</code></pre>
<ul>
<li>
<p><strong>适用元素</strong>：块级元素、内联元素（自动转为Grid Item）</p>
</li>
<li>
<p><strong>使用场景</strong>：</p>
<ul>
<li>二维布局（同时控制行和列的对齐）</li>
<li>复杂的网格结构（如仪表盘、卡片布局等）</li>
</ul>
</li>
<li>
<p><strong>特点</strong>：<br />
与Flex布局类似，Grid容器会覆盖子元素的原始类型，统一按Grid规则处理。</p>
</li>
</ul>
<h4>三、绝对定位 + transform</h4>
<pre><code>.parent {
position: relative; /* 父元素需要有定位 */
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</code></pre>
<ul>
<li>
<p><strong>适用元素</strong>：块级元素、内联元素（需转为 <code>inline-block</code>）</p>
</li>
<li>
<p><strong>使用场景</strong>：</p>
<ul>
<li>弹出层、模态框的居中</li>
<li>元素尺寸未知时的居中</li>
</ul>
</li>
<li>
<p><strong>注意</strong>：<br />
内联元素需要设置 <code>display: inline-block</code> 才能正确应用 <code>transform</code>。</p>
</li>
</ul>
<h4>四、绝对定位 + <code>margin:auto</code>（已知尺寸）</h4>
<pre><code>.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px; /* 必须指定宽高 */
height: 100px;
}
</code></pre>
<ul>
<li>
<p><strong>适用元素</strong>：块级元素</p>
</li>
<li>
<p><strong>使用场景</strong>：</p>
<ul>
<li>已知固定尺寸元素的居中（如固定大小的图片或按钮）</li>
</ul>
</li>
<li>
<p><strong>限制</strong>：<br />
内联元素必须设置为 <code>display: block</code> 或 <code>display: inline-block</code> 并且设置 <code>width/height</code> 才能通过 <code>margin: auto</code> 居中。</p>
</li>
</ul>
<h4>五、行高 + <code>text-align: center</code>（单行文本）</h4>
<pre><code>.parent {
height: 200px;
line-height: 200px; /* 垂直居中 */
text-align: center; /* 水平居中 */
}
</code></pre>
<ul>
<li>
<p><strong>适用元素</strong>：内联元素、<code>inline-block</code> 元素</p>
</li>
<li>
<p><strong>使用场景</strong>：</p>
<ul>
<li>单行文本垂直居中</li>
<li>按钮图标与文字混合对齐</li>
</ul>
</li>
<li>
<p><strong>限制</strong>：<br />
可以将块级元素设置为 <code>inline-block</code>来利用 <code>text-align: center</code> 实现水平居中，但是无法通过 <code><line-height</code> 实现垂直居中。</p>
</li>
</ul>
页:
[1]