1、如何使用CSS实现垂直水平居中?
这是一道经典的问题,实现方法有很多种,以下是其中一种css方式实现:
html文件:
<div class="parent">
<div class="content"></div>
</div>
css文件:
.parent{position:relative;}
.content{
background-color:blue;
width:200px;
height:200px;
position: absolute;
top: 50%;
left: 50%;
margin-top:-100px ;
margin-left: -100px;
}
为什么要把width和left减半?
首先对父元素top,left绝对定位在50%的位置,这时候只是子元素左上角居中,而中心点还没居中,加上 margin-top:-100px ; margin-left: -100px;利用负边距把图片的中心点位于父元素的中心点,从而实现垂直水平居中
2、CSS Hack
什么是CSS Hack?
一般来说就是为解决兼容性针对不同的浏览器写不同的CSS,就是 CSS Hack。
常见的浏览器兼容性问题
1、上边距
IE6 中 , 上边距要比 其他浏览器大
解决方案:统一设置 body 的margin 和 padding 值
2、居中布局
IE 低版本中 text-align 可以通知所有的元素水平对齐方式(文本、行内、块级),其他版本则不行
解决方案:
外层元素 text-align
内层元素 添加 margin:auto
3、元素高度问题
如果内容超出了元素定义的高度时候,所产生的问题
解决方案:
1、设置元素高度与内容高度一致
2、overflow:hidden 解决
4、上边距(一)
在父子元素中,在子元素里设置上边距后所产生的问题。
问题:子元素的外边距会 适应 到父元素的外边距上
解决方案:
1、通过父元素的padding-top来替代
2、设置父元素的边框(可以为透明的)