元素垂直水平居中的三种方法&父级没高度不能自适应高度

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sweet_o/article/details/84870745

第一种方法:

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法：

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

transform:translate(-50%,-50%);

}

 *这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器 

---------------

第三种方法

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置，距离上、下、左、右都为0-->

left:0;

right:0;

top:0;

bottom:0;

<!--设置元素的margin样式值为 auto-->

margin:auto;

}

------------------------------------------------------------------------------------------------------------------------

方法一：对父级设置固定高度

**********此方法缺点，父级是固定高度，而不随内容高度自适应高度，没高度。此方法针对能确定父div内的内容高度情况下使用。

方法二：使用css clear清除浮动

**********对父级div标签闭合</div>前加一个div.clear清除浮动对象。此方法需要注意是clear:both加的位置，不是对父级直接加clear样式，而是在父级</div>前加带clear对象盒子

方法三：对父级样式加overflow样式

**********推荐。此方法为非常简单解决子用float，父div不能自适应高度，不能随父内容多少而自适应高度没有高度。