php css 改变宽度,css 宽高自适应的div元素以及如何垂直居中

在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法

上代码

下面的是 结构代码

//此处为父组件 我们会设置父级的宽高并让其居中

//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开

　　

下面是样式代码.wrap{设置一个居中的外框

width: 500px;

height: 400px;

border: 1px solid black;

margin: 0 auto;

text-align: center;//水平居中

}

.wrap:before{//设置一个宽度为0的伪类为什么要设置这个伪类 起时这个伪类起到了一个对准线的作用

display: inline-block;

content: '';

height: 100%;

width: 0;

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

}

.center{//这个时候 在对我们的centerdiv 设置 vertical-align: middle 就可垂直居中了

vertical-align: middle;

display: inline-block;

}

img{

vertical-align: top;

}

二 css3 transform解决.wrap{//一个固定宽高 居中的外框

width: 500px;

height: 400px;

border: 1px solid black;

margin: 0 auto;

}

.center{//我们的center div 还是写成inline-block 的样式

position: relative;

//相对定位 通过相对定位left top 值的设置来让center div 的左上角的位置 为wrap 的中心

//但这个时候我们还不是完全垂直居中 因为我们的center div 本身也有自适应的宽高 这个时候 就要用到transform了

//通过translateX(-50%) translateY(-50%) 让center 本身在x轴y轴上偏移50% 达到真正的居中(轴心点默认在左上角)

//注意transform各个浏览器有不同的前缀并且不兼容ie8 以下

top: 50%;

left: 50%;

display: inline-block;

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

}

img{

vertical-align: top;

}

document{height: 100%;}

html{height: 100%;}

body{height: 100%;

overflow: hidden;margin: 0;}

#bigwrap{width: 100%;height: 100%;text-align: center;}

#bigwrap:before{height: 100%;width: 0;

vertical-align: middle;content: '';

display: inline-block;}

.wrap{width: 500px;height: 400px;border: 1px solid black;margin: 0 auto;text-align: center;}

.wrap:before{display: inline-block;content: '';height: 100%;width: 0;vertical-align: middle;}

.center{vertical-align: middle;display: inline-block;}img{vertical-align: top;}

/*

.center {

position: fixed;

top: 50%;

left: 50%;

background-color: #000;

width:50%;

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

*/