详解CSS垂直居中的几种方式

发布时间：2022-04-20 09:33:27 所属栏目：语言来源：互联网

导读：利用CSS实现垂直居中有许多不同的方法，但是很多新手来说如何选择正确的方法是比较不容易的。这篇文章就主要例举了CSS垂直居中的11种实现方法，有具体的代码以及效果展示，希望对大家了解CSS垂直居中有所帮助。 1. 使用绝对定位和负外边距对块级元素进行垂直

利用CSS实现垂直居中有许多不同的方法，但是很多新手来说如何选择正确的方法是比较不容易的。这篇文章就主要例举了CSS垂直居中的11种实现方法，有具体的代码以及效果展示，希望对大家了解CSS垂直居中有所帮助。

       1. 使用绝对定位和负外边距对块级元素进行垂直居中
       html代码：

<div id="box">
  <div id="child">我是测试DIV</div>
</div></pre>
css代码：
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: orange;
position: absolute; top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}

       这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。

       2. 使用绝对定位和transform
       html代码：

<div id="child"> 我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本 </div></pre>
css代码：
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}

       这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了，因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

       这种方式的原理实质上和前两种相同。补充的一点是：margin的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Tomcat下载和安置	装饰器模式装饰设计模
无用单元采集垃圾回收	Java访问对象的属性和