学习记录,html元素上下居中案例

这算是前端开发的基础之一,但是用到的地方不多,我也就没有深入研究,最近一个项目却突然需要实现这个效果,原本我是打算用js来计算边距,赋给内部的元素,但是这样太麻烦了很没必要,网上查询了一下,教程还是很多的,就是在不同浏览器的兼容上可能有问题。因为可能以后会用到,决定记录下来。
本文章参考thinkcss

html代码如下,需要img图片在类名为top-img的这个div内上下居中:

<div class="box">
<div class="top-img">
<img src="img/user-dj.png"/>
</div>
</div>

1.关键代码display:flex

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

CSS代码如下:

.box{width:100%;
height:100%;}
.top-img{width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
display:flex;
align-items:center}
.top-img img{width:100%;}

其它的代码都是补充样式,实现效果,但是请注意如下的css定义。

align-items:center
弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

所以,在以上两个样式的配合实现了上下的居中,但是主要定义类名top-img的div和其中的基本元素,而且不能具有div的性质。

2.关键代码display:table

display:table将元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

CSS代码如下:

.box{width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
display table}
.top-img{display:table-cell;
vertical-align:middle;}
.top-img img{width: 100%}

这种实现方式,将div变为了table表格的属性,而表格就可以通过vertical-align:middle实现上下居中,而以下是不同定义对应的表格标签属性。

display:table=>相当于“table”标签;
display:table-row=>相当于“tr”标签;
display:table-cell=>相当于“td”标签;

3.关键代码position:absolute

其实用position的fixed属性也是可以的,主要是借用css的定位属性,配合margin外边距实现。
CSS代码如下:

.box{width:100%;
height:100%;}
.top-img{width:100%;
height:100%;
position:relative;
background-color:rgba(0,0,0,0.7);}
.top-img img{width:100%;
height:200px;
top:50%;
margin-top:-100px;
position:absolute;}

什么原理呢,通过定位的定义借用top属性,让图片距离顶部正好50%,但是图片本身是具有高度的,所以会挤下来,于是在知道图片高度的情况下,可以设置margin-top的负数为图片高度的一般,但是如果不知道图片的高度,或者就是自动高度的情况下,可以通过CSS3代码transform:translateY(-50%)来实现向上移动图片本身高度的百分之五十。

position:absolute;position:relative绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right和top或bottom在父级内进行绝对定位。

总结:
以上三种方式都可以达成目的,但是在兼容上,通过定义为列表的属性可以获得绝大多数浏览器的支持,但是不便于用其它的css进行扩展,第一种办法最为简单,不过对IE以前的版本不提供支持,而第三种如果图片高度是固定的情况下,将具有良好的兼容和实现效果,毕竟任何版本浏览器都支持吗margin,但是如果在制作响应式网页,或者为了防止图片高度变形的时候,margin-top就无法得到准确值,用js获取就没有简便的意义了而transform:translateY是作为css3属性,老版IE是不兼容的。
所以,实际的使用过程中,要根据情况进行选择。

我最终的效果如下:
Snap.jpg

发表评论
加载中...

相关文章