服务热线:021-54942179  67663250
当前位置:首页 > 建站知识 > 网站建设知识 > 正文
分享到: 0

闵行做网站分享用CSS实现垂直居中的效果

来源:明企上海网站建设   日期:2017/5/3   已被阅读:2404

不管是初学者,还是有经验的网站技术人员,都需要经常用css实现垂直居中的效果。闵行做网站 明企科技总结了一下在不同浏览器下,通过CSS(层叠样式表)实现居中效果的方法。
css
用绝对定位实现垂直居中
举例说明:网站上有一张图片,我们想让它居中,首先我们需要创建一个div容器去包裹它,然后给它定义一些样式。
HTML
-----
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
现在我们有了一张包裹在div中的图片,我们给不光给图片以及div元素定义了尺寸,还给div元素定义了#fff的背景色。 现在我们需要给我们的父元素添加相对定位属性,同时,要给子元素也就是图片元素添加绝对定位属性。
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
}
现在,我们会将子元素的top属性设置为50%。
div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
}
目前为止图片还没有实现垂直居中,现在我们需要给它一个负的margin-top值,这个值为你想要实现垂直居中的元素高度的一半,在本例中就是那张图片。 *如果不确定元素的高度,可以不使用margin-top,而是使用transform:translateY(-50%);属性。 div{
width: 300px;
height: 250px;
background: #fff;
position: relative;
}
img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px; /* half the size of image */
}
闵行做网站
明企友情提醒:如果你想要同时实现水平居中,那么你可以用实现垂直居中的一样的技巧来实现。 利用Display: table;来实现垂直居中 我们可以通过display属性的table值来实现垂直居中。如何实现呢? 首先我们先要创建一个div元素以及另外一个包含图片的div元素,然后我们开始设置它的样式。
HTML
-----
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
}
现在,把包裹图片的那个div元素的display属性设置为table-cell。
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
}
但是现在好像还没有居中,对吧?当然啦,为了实现垂直居中,我们现在要做的就是给包裹图片的div元素设置vertical-align: middle;属性。
div{
width: 300px;
height: 250px;
background: #fff;
display: table;
}
img{
width: 100px;
}
div#img{
display: table-cell;
vertical-align: middle;
}
闵行做网站
明企提示:如果你也想实现水平居中,你可以给最外层的div元素添加text-align: center属性,注意不是id=”img”的div 使用flex实现垂直居中 最后但是也同样重要的是,你可以利用flex实现垂直居中。flex可能不是实现水平垂直居中最好的选择,因为IE8,9并不支持它。 你可以点这里看看浏览器是否支持:点击这里 现在,为了用flex实现垂直居中,我们首先要创建一个包裹着图片的div元素,然后给它定义一些基础属性。
HTML
----------
CSS
-----
body{
background: #ccc;  /* just to make it visible in screenshots */
}
div{
width: 300px;
height: 250px;
background: #fff;
}
img{
width: 100px;
height: 100px;  /* you must give height so it doesn't expand */
}
现在,我们需要把div元素的display属性设置为flex。 div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
}
img{
width: 100px;
height: 100px;   /* you must give height so it doesn't expand */
}
现在还没居中是吧?继续,现在我们需要做的就是给div添加另外一条属性align-items: center;
div{
width: 300px;
height: 250px;
background: #fff;
display: flex;
align-items: center;
}
img{
width: 100px;
height: 100px;   /* you must give height so it doesn't expand */
align-items: center;
}
说到这里,相信现在你知道如何用CSS去实现垂直居中了。希望这篇文章对大家的有所帮助,当然如果关于网站开发还有什么不明白的地方,闵行做网站 明企技术人员很乐意和大学交流心得。

网站建设知识本文网址:http://www.mq163.net/wangluoyingxiaozhishi/detail_355.htm 转载需注明出处。

网站建设流程

  • 需求分析

  • 费用计算

  • 签订协议

  • 创意设计

  • 修改反馈

  • 网站测试

  • 售后维护

服务区域:
  • 1