高度不定垂直居中_css不定高度怎么设置垂直居中？

在未知元素的宽高情况下，怎么设置垂直居中？下面给大家介绍一下使用CSS在不定宽高下设置垂直居中的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

第一种：使用 flex盒布局 (推荐)

首先说一下Flexbox。Flexbox是css3的一个盒子模型，其中我们只要使用align-items和 align-content 就能较为快速地实现内部div没有确定高度居中方式。

测试代码：

html:

css:html, body {

margin: 0;

padding: 0;

width: 100% ;

height: 100% ;

}

.flexbox {

display: flex;

align-items: center;

justify-content: center;

width: 100% ;

height: 100% ;

}

.flexbox div {

width: 100px;

height: 50px;

background: #fcf000;

}

第二种：使用 transform

transform是css3的新属性，可以操控节点的位移，旋转等。在垂直居中中，只要用到了transform中的translateX，translateY这两个属性。

使用translateX，translateY来居中有以下的几点要注意的：子div(子节点)需要使用 position: relative;

使用top，left分别为-50%。以及translateX，translateY为50%进行位移居中

测试代码：

html:

css:html, body {

margin: 0;

padding: 0;

width: 100% ;

height: 100% ;

}

.transform {

width: 100% ;

height: 100% ;

}

.transform div {

position: relative;

width: 100px;

height: 50px;

top: 50% ;

left: 50% ;

transform: translateY(-50%) translateX(-50%);

background: #f96600;

}

第三种：display的table-cell 表格单元格.transform {

width: 100% ;

height: 100% ;

display: table; // 设置display属性

}

.transform div {

width: 100px;

height: 50px;

display: table-cell; // 子元素水平居中

vertical-align: middle; // 垂直居中

background: #f96600;

}

这种方法的优点在于：

content 可以动态改变高度(不需在 CSS 中定义)。

当 父节点里没有足够空间时，content 不会被截断。(在实际中这个是十分实用的)

而使用绝对定位content不可以动态改变高度。

最后，垂直居中方式有很多，采取合适才是最重要的。

更多web前端开发知识，请查阅 HTML中文网 ！！