高度不定垂直居中_css如何实现div高度不固定垂直居中？

该方法适用于所有品牌的电脑。

CSS不固定高宽div垂直居中的方法

1、伪元素和 inline-block / vertical-align

.box-wrap:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

margin-right: -0.25em; //微调整空格

}

.centered {

display: inline-block;

vertical-align: middle;

}

方案一

我是伪类，看我是否垂直居中

该方法非常巧妙的解决了垂直居中问题，可以作为参考~

2、css3—flex

.box-wrap {

height: 300px;

justify-content:center;

align-items:center;

display:flex;

background-color:#666;

}

我是css3-flex

css3属性~不兼容ie8以下

3、css3—transform

.box-wrap {

width:100%;

height:300px;

background:rgba(0,0,0,0.7);

position:relative;

}

.box-content{

position:absolute;

background:pink;

left:50%;

top:50%;

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

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

}

我是css3-transform

css3属性~不兼容ie8以下

4、设置margin:auto来达到效果

.box-wrap {

position: relative;

width:100%;

height:300px;

background-color:#f00;

}

.box-content{

position: absolute;

top:0;

left:0;

bottom:0;

right:0;

width:50%;

height:50%;

margin:auto;

background-color:#ff0;

}

我是auto

该方法得严格意义上的非固定宽高，而是50%的父级的宽高。视觉上可以达到效果，如果是集中有类似的需求可以用此方法。