今天:
现在的位置:首页 > 平面设计

易人宣网络分享|用CSS实现垂直居中的效果

发布时间:2018-11-30 发布者:admin 浏览次数: 来源:

不管是初学者,还是有经验的网站技术人员,都需要经常用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去实现垂直居中了。希望这篇文章对大家的有所帮助,当然如果关于网站开发还有什么不明白的地方,武汉做网站 易人宣网络技术人员很乐意和大学交流心得。

了解更多武汉网站建设_汉阳网站建设_武汉网站设计_武汉网站制作知识可在线咨询或添加易人宣网络小易姐姐微信:13307186778
在线咨询
咨询电话
027-84294596