HTML/CSS教程
当前位置:主页 > HTML/CSS教程 >
实现元素垂直居中的几种方法
时间:2018年09月27日 来源:原创 作者:大葱 浏览:
1、line-height:5px,这种方法主要用来实现文字垂直居中,值设置成和父元素的高度一样即可。但是这种方法不能实现块级元素的居中。

2、vertical-align:middle,这种方法要添加一个高度和父元素一样的子元素,然后所有元素都添加这个属性,才能生效。
      这个可以应用在图标和文字的对齐上,并且
vertical-align: middle属性是写在子元素内的
      如:下面的方法就实现了所有元素垂直居中
<style>
.ctn-block{
     background-color: #bbb;
     height: 300px;
     width: 100%;
 }
.ctn-block .child {
    display: inline-block;
    width: 100px;
    background-color: aliceblue;
}
.ctn-block .child{
    height: 100px;
    vertical-align: middle;
}
 //下面这个是重点,给父元素加个和其高度一样的空元素设置
vertical-align: middle;
.ctn-block::after{
    content: "";  
    height: 300px;
    vertical-align: middle;
    display: inline-block;
}
</style>
<div class="ctn-block">
    <div class="child child-1">1</div>
    <div class="child child-2">2</div>
    <div class="child child-3">3</div>
</div>
3、display:table-cell 和vertical-align:middle,这种方法是把这两个属性一起写在父元素内,和上个方法写在子元素中是不一样的。并且这个方法不用加空元素。
      注意点:使用这种方法后,父元素的宽度会变成和里面的子元素总的宽度一样,这样无法占满屏幕的宽度,因此,要给父元素的父元素添加display:table属性

4、display:flex,给父素添加两个属性:
display:flex;align-items: center,这样就可以让子元素垂直居中,很好用的方法。
      补充:添加属性justify-content:给子元素实现水平居中或平均分布等,很好用。下面再补充其它属性。
order:项目的排列顺序。数值越小,排列越靠前,默认为0。  
flex-grow:项目的放大比例,默认为0,即如果存在剩余空间,也不放大。  
flex-shrink:项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。  
flex-basis:在分配多余空间之前,项目占据的主轴空间(mainsize)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。  
flex:是flex-grow,flex-shrink和flex-basis的简写,默认值为01auto。后两个属性可选。  
align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
      

上一篇:CSS实现超出的文字用省略号代替
下一篇:没有了
推荐文章