css不固定寬高垂直居中的實作程式碼

本文主要和大家分享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不固定寬高垂直居中的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！