居中方案

居中方案

  • 水平居中
    • 行内元素
      • 父元素设置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 条评论
登录 后参与评论

相关文章

来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——SliderView控件的使用方式

获得和设置标签视图集合,打开集合编辑器,并点击“添加”,分别填写ResourceID属性(菜单项图片名称),Text(菜单项文本),Value(内部值,不在界面...

601
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

1112
来自专栏CaiRui

CSS

CSS的四种引入方式: 一、行内样式 <div style="background-color: blue;color: brown">cairui</div>...

1776
来自专栏小筱月

vue 路由 及 跳转传递参数的总结

1051
来自专栏前端vue

element导航问题总结

官方文档 router-link-active----激活 class 类名 router-link-exact-active----精确激活的默认的 cl...

1274
来自专栏carven

利用canvas实现毛笔字帖(三)

3. 第3部分controller.js 这一部分的功能就是要修改毛笔的颜色,还有清空画布。 功能简单,我们一起向下讲。 一开始依然是init controll...

723
来自专栏IMWeb前端团队

Web-Fontmin -- 在线提取你需要的字体

关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @...

6018
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

18910
来自专栏菩提树下的杨过

UrlReferrer为空的问题?

官方解释:获取有关客户端上次请求的 URL 的信息,该请求链接到当前的 URL。 1.也就是说,如果用Request.Redirect之后,再用Request....

1829
来自专栏前端说吧

JS - 可自动伸缩高度的文本框

change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让texta...

1002

扫码关注云+社区