欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css不固定宽高垂直居中的实现代码

程序员文章站 2022-04-19 14:32:00
...
本文主要和大家分享css不固定宽高垂直居中的实现代码,希望能帮助到大家。
一、

父元素:
display: flex;
justify-content: center;
align-items: center;


二、

父元素:
position: relative;

元素:
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;


三、   		
display: table;需要有一个中间层,垂直居中元素为第三层

(1)
父元素的父元素:
display: table;

父元素:
display: table-cell;
text-align: center;
vertical-align: middle;

元素:
display: inline-block;


(2)

父元素的父元素:
display: table;

父元素:
display: table-cell;
vertical-align: middle;

元素:
margin: auto;

相关推荐:

css垂直居中实现代码

四种css垂直居中方法

CSS垂直居中的解决方法

以上就是css不固定宽高垂直居中的实现代码的详细内容,更多请关注其它相关文章!