居中方案

居中方案

  • 水平居中
    • 行内元素
      • 父元素设置text-align:center
    • 定宽块元素
      • 设置 margin 左右为 auto
      • 块元素文本居中设置text-align:center
    • 不定宽块元素
      • 设置 display 为 table,margin 左右为 auto 利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
      • 设置 display 为 inline 或 inline-block,按行内元素居中处理
      • 给父元素设置float:left position:relative 和 left:50%,且: float隐性改成了display:inline-block使得div获得宽度自适应特性(这是关键),本质是触发了BFC。所以换成​ display:inline-block 或 display:flex也可以。或者不要float:left position:relative ,直接写成position:absolute等。
        • 子元素设置 position:relative 和 left: -50% 来实现水平居中,会溢出父元素盒模型
        • 或者使用css3的transform: translateX(-50%),效果一样,会溢出父元素盒模型
        • 子元素还可以用 margin-left:-50% 来居中,但是这样会使子元素宽度变为实际宽度的1.5倍
  • 垂直居中
    • 父元素高度确定的单行文本
      • 设置父元素的 height 和 line-height 高度一致。 line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。
    • 父元素高度确定的多行文本
      • 设置父元素 display:table
      • 用一个元素包裹多行标签元素,设置 display:table-cell 和 vertical-align:middle
    • 父子元素高度未知
      • 设置父元素 position:relative
      • 设置子元素 position: absolute top: 50% transform: translateY(-50%)
  • flex(不兼容IE)
    • 父元素设置
    • display:flex;/*Flex布局*/
    • display: -webkit-flex; /* Safari */
  • 附:隐性改变display类型
    • 元素(不论之前是什么类型元素,display:none 除外)
    • 设置以下 2 个句之一:
    • position : absolute
    • float : left 或 float:right
    • 元素的display显示类型就会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Petrichor的专栏

Dataset 列表:机器学习研究

In computer vision, face images have been used extensively to develop face recog...

1501
来自专栏Golang语言社区

Knapsack problem algorithms for my real-life carry-on knapsack

I'm a nomad and live out of one carry-on bag. This means that the total weight o...

1142
来自专栏WOLFRAM

向日葵中的数学之美

1833
来自专栏搞前端的李蚊子

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

5896
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112
来自专栏码匠的流水账

java9系列(五)Stack-Walking API

java9新增这个类的目的是提供一个标准API用于访问当前线程栈,之前只有Throwable::getStackTrace、Thread::getStackTr...

421
来自专栏增长技术

App Guide相关

##TourGuide https://github.com/worker8/TourGuide

702
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1282
来自专栏前端儿

Web 前端颜色值--字体--使用,整理整理

颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 2...

2282
来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

771

扫码关注云+社区