css系列之水平垂直居中

MiracleWong 发布于2019-08-29 13:44 / 3281人阅读

摘要：水平居中水平居中没有什么好说的啦，对于行内元素使用对于块级元素使用前提是已经为元素设置了适当的宽度垂直居中单行文本多行文本伪元素行内元素伪元素未知宽高绝对居中绝对定位已知宽高负要考虑兼容性浮动元素垂直居中父元素

水平居中

水平居中没有什么好说的啦，对于行内元素使用text-align;对于块级元素使用margin: auto（前提是已经为元素设置了适当的 width 宽度）;

垂直居中 单行文本

line-height == height

多行文本 伪元素before/after


    etttttttttttttttttttttttttttttttttttttttttttttgdfsffffffffffffffffffffffffffffffffffffffffffffffffff

.parent {
  height: 250px;
  text-align: center;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
   width: 200px;
   display: inline-block;
   word-wrap: break-word;
   border: 1px solid;
   vertical-align: middle;
}

行内元素 line-height


　

.parent {
  line-height: 200px; 
}
.child {
    vertical-align: middle;
}

伪元素before/after


　

.parent {
  height: 200px;
  border: 1px solid;
}
.parent:before {
  content: " ";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.child {
    vertical-align: middle;
}

table-cell ie8+


　

.parent {
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}
.child {
  vertical-align: middle;
}

未知宽高 绝对居中+margin:auto

.parent {
   position: relative;
}
.child {
   position: absolute; 
   left: 0; 
   top: 0; 
   right: 0; 
   bottom: 0;
　 margin: auto;
}

绝对定位+transform ie9+

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 transform: translate(-50%,-50%);
}

flex ie10+

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

grid ie10+

.parent {
   display: grid;
   justify-content: center;
   align-items: center;
}

已知宽高 负margin

要考虑兼容性

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: 50%;
　 left: 50%;
　 margin: -height/2 -width/2;
}

padding

.parent {
   padding: (parent.height-child.height)/2  (parent.width-child.width)/2;
}

absolute + calc ie9+

.parent {
   position: relative;
}
.child {
   position: absolute;
　 top: calc(50% - height/2 );
　 left: calc(50% - height/2 );
}

浮动元素垂直居中 父元素table-cell

#demo {
    width: 300px;
    height: 200px;
    background-color: grey;
    
    display: table-cell;
    vertical-align: middle;
}
.fl {
    float: left;
    width: 50px;
    height: 50px;
    background-color: black;

}

私有云专线服务水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112674.html

CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Labradors 2019-08-02 16:01 评论0 收藏0
CSS之各种居中

摘要：前言在我看来，入门的路上最烦人的就是的各种居中了。在我初学过程中，居中这个问题经常困扰到我。使用伪元素垂直居中这种方法的前提是要是行内元素才能进行居中。结语以上的方法基本上可以用完成各种情况的居中。前言在我看来，入门CSS的路上最烦人的就是CSS的各种居中了。在我初学CSS过程中，居中这个问题经常困扰到我。那为什么CSS的居中这么烦人呢？我认为，这是因为CSS的居中方法以及它的适...

Taste 2019-08-30 14:13 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
CSS实现水平|垂直居中漫谈

摘要：原文首链实现水平垂直居中漫谈利用进行元素的水平居中，比较简单，手到擒来行级元素设置其父元素的，块级元素设置其本身的和为即可。原文首链：CSS实现水平|垂直居中漫谈利用CSS进行元素的水平居中，比较简单，手到擒来：行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。而撸起垂直居中，相信于大多初撸者来说，...

孙吉亮 2019-08-28 18:29 评论0 收藏0
查漏补缺 - 收藏集 - 掘金

摘要：酝酿许久之后，笔者准备接下来撰写前端面试题系列文章，内容涵盖浏览器框架分钟搞定常用基础知识前端掘金基础智商划重点在实际开发中，已经非常普及了。这道题--致敬各位10年阿里的前端开发 - 掘金很巧合，我在认识了两位同是10年工作经验的阿里前端开发小伙伴，不但要向前辈学习，我有时候还会选择另一种方法逗逗他们，拿了网上一道经典面试题，可能我连去阿里面试的机会都没有，但是我感受到了一次面试1...

YuboonaZhang 2019-08-29 12:56 评论0 收藏0