CSS-居中总结

1.块级元素水平居中

{
  margin: 0 auto;
}

2.行内元素居中

text-align: center;

3.行内或者块级元素垂直居中

父元素的高度尽量不要固定,让它自适应,只有在父元素是全屏的情况下才有固定高度的垂直居中

  • 上下padding相等

4.单行文本垂直居中

line-height = height;

5.父元素高度不固定垂直居中

  • 只需让上下padding相等即可

6.父元素高度固定垂直居中

  • 尽量不要出现这种情况,这是一个奇怪的需求(只有全屏时候才有这种需求)
  • jscode上有7种,其中常用的就是flex(简单方便)和table(兼容性好),其余5种属于炫技,面试知道即可

7.绝对居中

方法1

  • 先绝对定位,让左上角的点绝对居中
  • 再用负margin,达到理想效果
    • 或者用transform: translate(-50%, -50%);
postion: absolute;
left: 50%;
top: 50%;
margin:-aa -bb;

方法2——flex法

  1. 父元素display为flex
  2. 水平居中:justify-content: center;
  3. 垂直居中:align-items: center;

方法3——table-cell实现垂直居中

  1. 父元素display为table-cell
  2. 子元素 vertical-align: middle;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 顺化古皇城 顺化是座古城,通宵夜车十几个小时才能到达,计划只停留半日,下午继续前往海滨城市岘港。这半天的时间是可以...
    蔓延022阅读 3,517评论 0 0
  • 与前一篇写情绪表达的文章一起,这两篇文章的灵感都来自于TED台湾地区的一段演讲,我听了之后感触真是非常的多。他提到...
    七彩霞衣阅读 1,508评论 0 0
  • 虽然我妈在纽约 我爸在打牌 此刻在下雨,但我用他送的耳机听着他为我唱的歌,心里特别温暖。 我们都是感性的人,心情会...
    小茵茵Alice阅读 1,833评论 0 0