CSS实现元素水平垂直居中的几种方法
<h2>1. 使用Flexbox布局</h2><p>Flexbox是CSS的强大布局模型，它为我们提供了简单而灵活的方法来实现元素的水平和垂直居中。</p>
<div class="jb51code"><pre class="brush:xhtml;">html复制代码
<div class="container">
<div class="centered-element">
<!-- 内容 -->
</div>
</div></pre></div>
<div class="jb51code"><pre class="brush:css;">css复制代码
.container {
display: flex;
justify-content: center;
align-items: center;
/* 设置容器的宽高，如果需要 */
width: 100vw;
height: 100vh;
}
.centered-element {
/* 元素样式 */
}</pre></div>
<p>上面的代码中，我们使用了Flexbox布局模型，通过<code>display: flex;</code>将容器设置为弹性布局容器。<code>justify-content: center;</code>和<code>align-items: center;</code>分别使内容在水平和垂直方向上居中。</p>
<h2>2. 使用绝对定位和transform</h2>
<p>另一种常用的方法是使用绝对定位和CSS的<code>transform</code>属性来实现元素的居中。</p>
<div class="jb51code"><pre class="brush:xhtml;">html复制代码
<div class="container">
<div class="centered-element">
<!-- 内容 -->
</div>
</div></pre></div>
<div class="jb51code"><pre class="brush:css;">css复制代码
.container {
position: relative;
/* 设置容器的宽高，如果需要 */
width: 100vw;
height: 100vh;
}
.centered-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 元素样式 */
}</pre></div>
<p>上面的代码中，我们将容器设置为相对定位，并通过<code>top: 50%;</code>和<code>left: 50%;</code>将元素的左上角定位到了容器的中心。然后，通过<code>transform: translate(-50%, -50%);</code>将元素向左和向上移动自身宽高的一半，从而实现元素在水平和垂直方向上的居中。</p>
<h2>3. 使用Grid布局</h2>
<p>如果你在项目中已经使用了CSS的Grid布局，那么也可以很容易地实现元素的水平和垂直居中。</p>
<div class="jb51code"><pre class="brush:xhtml;">html复制代码
<div class="container">
<div class="centered-element">
<!-- 内容 -->
</div>
</div></pre></div>
<div class="jb51code"><pre class="brush:css;">css复制代码
.container {
display: grid;
place-items: center;
/* 设置容器的宽高，如果需要 */
width: 100vw;
height: 100vh;
}
.centered-element {
/* 元素样式 */
}</pre></div>
<p>在上面的代码中，我们使用了Grid布局，通过<code>display: grid;</code>将容器设置为网格容器。然后，通过<code>place-items: center;</code>将内容在网格容器中居中。</p>
<h2>4. 使用text-align和line-height</h2>
<p>如果你需要让一个行内元素水平垂直居中，你可以使用<code>text-align: center;</code>将内容在水平方向上居中，然后使用<code>line-height</code>属性设置和容器高度相等的行高来实现垂直居中。</p>
<div class="jb51code"><pre class="brush:xhtml;">html复制代码
<div class="container">
<span class="centered-text">居中文本</span>
</div></pre></div>
<div class="jb51code"><pre class="brush:css;">css复制代码
.container {
/* 设置容器的宽高，如果需要 */
width: 100vw;
height: 100vh;
text-align: center;
line-height: 100vh;
}
.centered-text {
/* 元素样式 */
display: inline-block;
vertical-align: middle;
}</pre></div>
<p>在上面的代码中，我们将容器设置为文本居中，并设置行高和容器高度相等，从而实现行内元素的垂直居中。同时，为了让行内元素居中，我们还使用了<code>display: inline-block;</code>和<code>vertical-align: middle;</code>。</p>
<h2>5. 利用定位+margin:auto</h2>
<p>父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高</p>
<div class="jb51code"><pre class="brush:xhtml;"><style>
.father{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.son{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<div class="father">
<div class="son"></div>
</div></pre></div>
<p>这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个<code>margin：auto</code>它就可以上下左右都居中了</p>
<h2>6. 利用定位+margin:负值</h2>
<p>绝大多数情况下，设置父元素为相对定位， 子元素移动自身50%实现水平垂直居中</p>
<div class="jb51code"><pre class="brush:xhtml;"><style>
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-left:-50px;
margin-top:-50px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="father">
<div class="son"></div>
</div></pre></div>
<ul><li>初始位置为方块1的位置</li><li>当设置left、top为50%的时候，内部子元素为方块2的位置</li><li>设置margin为负数时，使内部子元素到方块3的位置，即中间位置</li></ul>
<p>这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作,但是该方案需要知道子元素自身的宽高，但是我们可以通过下面transform属性进行移动</p>
<h2>总结</h2>
<p>根据元素标签的性质，可以分为：</p>
<ul><li>内联元素居中布局</li><li>块级元素居中布局</li></ul>
<h3>内联元素居中布局</h3>
<h4>水平居中</h4>
<ul><li>行内元素可设置：text-align: center</li><li>flex布局设置父元素：display: flex; justify-content: center</li></ul>
<h4>垂直居中</h4>
<ul><li>单行文本父元素确认高度：height === line-height</li><li>多行文本父元素确认高度：disaply: table-cell; vertical-align: middle</li></ul>
<h3>块级元素居中布局</h3>
<h4>水平居中</h4>
<ul><li>定宽: margin: 0 auto</li><li>绝对定位+left:50%+margin:负自身一半</li></ul>
<h4>垂直居中</h4>
<ul><li>position: absolute设置left、top、margin-left、margin-top(定高)</li><li>display: table-cell</li><li>transform: translate(x, y)</li><li>flex(不定高，不定宽)</li><li>grid(不定高，不定宽)，兼容性相对比较差</li></ul>
頁:
[1]