你有没有遇到过这样的情况,就是需要在一个父元素中垂直居中一个不定宽高的子元素,但是却无从下手呢?这确实是一个很常见的需求,今天我们来学习一下如何实现。 首先,我们可以使用flex布局来实现这个需求:.
你有没有遇到过这样的情况,就是需要在一个父元素中垂直居中一个不定宽高的子元素,但是却无从下手呢?这确实是一个很常见的需求,今天我们来学习一下如何实现。
首先,我们可以使用flex布局来实现这个需求:
.parent { display: flex; align-items: center; /* 垂直居中 */ }
这个方法非常简单,只需要在父元素上添加display: flex; 和 align-items: center; 就可以啦,不过这个方法不兼容IE10及以下版本的浏览器。
其次,我们可以使用position和transform来实现:
.parent { position: relative; } .child { position: absolute; top: 50%; /* 先让子元素的顶部距离父元素顶部50% */ transform: translateY(-50%); /* 再将子元素往上移自身高度一半的距离 */ }
这里要注意的是父元素需要设置position: relative; 子元素需要设置position: absolute; 然后再把子元素的top值设为50%,这一步是让子元素的顶部距离父元素顶部50%,然后再使用transform: translateY(-50%); 把子元素往上移自身高度一半,以达到垂直居中的效果。
最后,我们可以使用网格布局来实现:
.parent { display: grid; place-items: center; /* 完成水平和垂直居中 */ }
这个方法也非常简单,只需要在父元素上添加display: grid; 和 place-items: center; 就可以啦,但同样不兼容IE10及以下版本的浏览器。
以上就是CSS不定宽高怎么垂直居中的方法介绍,我们可以根据自己的需求来选择适合自己的方法,让页面更好看,更加美观。
粉丝
0
关注
0
收藏
0