css/css3实现未知宽高元素的垂直居中和水平居中

来源:博客园 分类: 文章浏览史 发布时间:2020-09-08 11:29:06 最后更新:2020-09-08 浏览:710
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-08 11:29:06

其实在平常的一些布局中也经常有要实现元素的垂直居中和水平居中的的需要,下面来写几种css/css3实现的未知宽高元素的水平和垂直居中的写法

ps:不考虑兼容问题(下次会写js实现元素的水平and垂直居中 )

第一种 css3的transform

复制代码
.ele{
/*设置元素绝对定位*/
    position:absolute;
/*top 50%*/
    top: 50%;
/*left 50%*/
    left: 50%;
/*css3   transform 实现*/
    transform: translate(-50%, -50%);
}
复制代码

第二种 flex盒子布局

复制代码
.ele{
/*弹性盒模型*/    
    display:flex;
/*主轴居中对齐*/
    justify-content: center;
/*侧轴居中对齐*/    
    align-items: center;  
 }
复制代码

第三种 display的table-cell  

复制代码
.box{
/*让元素渲染为表格单元格*/
    display:table-cell;
/*设置文本水平居中*/
    text-align:center; 
/*设置文本垂直居中*/
    vertical-align:middle;     
} 
复制代码

第四种 定位配合margin

复制代码
.ele{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
  }
复制代码

 

第三种是给父级添加样式。先写这几种, 够大家用了,还有通过伪类实现居中的效果,有兴趣的可以自己敲下试试

php技术微信