CSS3几种实现子容器水平垂直居中的方法
<h2>前言</h2><p>本文主要讲解有几种方法可以实现容器与子容器水平垂直居中，这些方法的使用方式。那么好，本文正式开始。</p>
<h2>子容器</h2>
<h3>Flexbox 布局</h3>
<div class="jb51code"><pre class="brush:xhtml;"><div style="display: flex;justify-content: center;align-items: center;border:1px solid gray;height:100px;width:100px;">
<div>1</div>
</div></pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112015283210.png" /></p>
<p>在上述代码中我们实现了垂直水平居中布局，用到的是FlexBox，先用display：flex把这个div变成一个Flex容器，用<strong>justify-content:center</strong>用于在主轴（默认水平）上居中对齐，用<strong>align-items:center</strong>在侧轴（默认垂直）上居中对齐。实现了一个子容器的水平居中对齐。</p>
<h3>position绝对定位+transform</h3>
<div class="jb51code"><pre class="brush:xhtml;"><div style="position: relative;width:100px;height:100px;border:1px solid gray;">
<div style="position: absolute;top:50%;left:50%;transform: translate(-50%, -50%)">1</div>
</div></pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112015283211.png" /></p>
<p>在上述代码中我们用position+transform实现了垂直水平居中，那么好，我们开始讲解。</p>
<p>首先在父容器中，设置relative相对定位，以便子容器实现绝对定位，否则它将定位到整个页面为父元素、然后在子容器中设置绝对定位，使其脱离正常文档流，定位到relative最近的那个div并且设置它的top和left，将容器的顶部和左侧定位到父容器中心，最后使用transform函数，将内部div沿着自身宽高的一般向左上移动这样则可以保证元素完全居中。</p>
<p>注：top和left的50%只是让子元素处在父容器的中心位置，而不会保证完全剧中，只有添加transform函数才会让元素根据自身尺寸想左上移动，前者是父容器的中心点，后者是元素本身中心点。</p>
<h3>表格布局</h3>
<div class="jb51code"><pre class="brush:xhtml;"><div style="display: table; width:100px;height:100px;border:1px solid gray;">
<div style="display: table-cell;vertical-align: middle;text-align: center ">1</div>
</div></pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202311/2023112015283212.png" /></p>
<p>table表格布局是一种传统布局，通过在父容器中设置display:table，使其成为一个包含单元格的表格容器，在子容器中设置为表格单元格，并且用vertival-alige和text-align分别垂直和水平居中。</p>
<h2>缺点</h2>
<p>Flex布局缺点：旧版浏览器对flexbox支持不完全，可能需要兼容性处理。</p>
<p>绝对定位+transform变换缺点：不适合响应式布局：绝对定为在固定尺寸容器实现，因此不能适应不同屏幕尺寸和设备的布局要求。<br />对文档流的影响：使用绝对定位可以使元素脱离正常文档流，这可能导致其他元素的布局受到影响。</p>
<p>CSS表格布局缺点：缺乏灵活性：使用表格布局时，难以轻松地对元素进行自适应调整，并且在处理复杂布局需求时可能存在一些限制。<br />响应式布局的挑战：由于表格布局通常是基于固定的行和列，它可能不太适合实现响应式布局，即在不同设备和屏幕尺寸上调整布局。</p>
頁:
[1]