CSS 的各种居中方式总结

Admin
Admin
Admin
52
文章
6
评论
更多
 2018年3月27日15:16:24 1 12,467 3933字阅读13分6秒

通过 CSS（层叠样式表）将页面中的元素居中显示是前端在开发的时候经常性遇到的问题，也是基本的技能之一，目前包括水平居中、垂直居中及水平垂直居中，今天我就把一些常用到的解决方案整理一下，算作自己对基本知识的梳理。

一、水平居中

1、行内元素水平居中
行内元素也叫内联元素、内嵌元素、直进式元素等，可以利用 text-align: center 可以实现在块级元素内部的内联元素水平居中

  1. .center {
  2.     text-align: center;
  3. }

此方法对内联元素（inline）、内联块（inline-block）、内联表（inline-table）、inline-flex 元素水平居中都有效
2、块级元素水平居中（固定宽度）
通过把固定宽度块级元素的 margin-left 和 margin-right 设成 auto，就可以使块级元素水平居中

  1. .center {
  2.     width: 100px;
  3.     margin: 0 auto;
  4. }

3、块级元素水平居中（不固定宽度）
在实际工作中我们会遇到需要为“不固定宽度的块级元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性
有三种方法可以对不固定宽度的块级元素进行居中：
A、方法一
将要显示的元素加入到 table 标签中，然后为 table 标签设置“左右margin”值为“auto”来实现居中；
或使用 display : table，然后设该元素“左右margin”值为“auto”来实现居中，这种方法更简洁
这样的目的是利用 table 标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的 margin 的方法，使其水平居中

  1. .center {
  2.     display: table;
  3.     margin: 0 auto;
  4. }

B、方法二
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后父级元素使用 text-align:center 来实现居中效果。

  1. .container {
  2.     text-align: center;
  3. }
  4. .center {
  5.     display: inline;
  6. }

但是这样会有一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，就无法设定块级元素的宽度值（变成 inline-block 就可以设置宽高）
C、方法三
通过给父元素设置 float，然后给父元素设置 position: relative 、 left: 50% 和清除浮动 clear: both，子元素设置 position: relative 和 left: -50% 来实现水平居中，用绝对定位也是可以的

  1. .wrap{
  2.     float: left;
  3.     position: relative;
  4.     left: 50%;
  5.     clear: both;
  6. }
  7. .wrap-center{
  8.     position: relative;
  9.     left: -50%;
  10. }

D、方法四
利用弹性布局（flex），实现水平居中，其中 justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

  1. .flex-center {
  2.     display: flex;
  3.     justify-content: center;
  4. }

二、垂直居中

1、单行文本的行内元素垂直居中
通过设置父行内元素的 height 和 line-height 高度相等，来实现元素垂直居中

  1. .warp {
  2.     height: 120px;
  3.     line-height: 120px;
  4. }

2、多行文本的行内元素垂直居中
A、方法一
将要显示的元素加入到 table 标签中，然后为 table 标签设置 vertical-align：middle 来实现居中；
或使用 display : table，然后设该元素 vertical-align：middle 来实现居中，这种方法更简洁

  1. .warp {
  2.     display: table;
  3.     vertical-align: middle;
  4. }

B、方法二
设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但这种方法兼容性比较差， IE6、7 并不支持这个样式

  1. .wrap {
  2.     display: table-cell; /*IE8以上及Chrome、Firefox*/
  3.     vertical-align: middle; /*IE8以上及Chrome、Firefox*/
  4. }

C、方法三
利用 flex 布局实现垂直居中，其中 flex-direction: column 定义主轴方向为纵向，因为 flex 布局是CSS3 中定义，在较老的浏览器存在兼容性问题

  1. .flex-wrap {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: center;
  5. }

3、块级元素垂直居中
A、方法一
知道居中元素的高度和宽度，可以通过绝对定位元素距离顶部50%，并设置 margin-top 向上偏移元素高度的一半，就可以实现垂直居中了

  1. .parent {
  2.     position: relative;
  3. }
  4. .child {
  5.     position: absolute;
  6.     top: 50%;
  7.     height: 100px;
  8.     margin-top: -50px;
  9. }

B、方法二
垂直居中的元素的高度和宽度未知时，可以借助 CSS3 中的 transform 属性向Y轴反向偏移50%的方法实现垂直居中，但是部分浏览器存在兼容性的问题

  1. .parent {
  2.     height: 140px;
  3.     position: relative;
  4. }
  5. .child {
  6.     position: absolute;
  7.     top: 50%;
  8.     transform: translateY(-50%);
  9. }

三、水平垂直居中

1、固定宽高元素水平垂直居中
通过 margin 平移元素整体宽度的一半，使元素水平垂直居中

  1. .parent {
  2.     height: 140px;
  3.     position: relative;
  4. }
  5. .child {
  6.     width: 200px;
  7.     height: 100px;
  8.     position: absolute;
  9.     top: 50%;
  10.     left: 50%;
  11.     margin: -50px 0 0 -100px;
  12. }

2、未知宽高元素水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中

  1. .parent {
  2.     height: 140px;
  3.     position: relative;
  4. }
  5. .child {
  6.     position: absolute;
  7.     top: 50%;
  8.     left: 50%;
  9.     transform: translate(-50%, -50%);
  10. }

3、利用 flex 布局
利用flex布局，其中 justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而 align-items 属性定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式

  1. .parent {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5. }

4、利用 grid 布局
利用 grid 实现水平垂直居中，兼容性较差，不推荐

  1. .parent {
  2.   height: 140px;
  3.   display: grid;
  4. }
  5. .child {
  6.   margin: auto;
  7. }

5、屏幕上水平垂直居中
屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到，要保证较好的兼容性，还需要用到表布局

  1. .outer {
  2.     display: table;
  3.     position: absolute;
  4.     height: 100%;
  5.     width: 100%;
  6. }
  7. .middle {
  8.     display: table-cell;
  9.     vertical-align: middle;
  10. }
  11. .inner {
  12.     margin-left: auto;
  13.     margin-right: auto;
  14.     width: 400px;
  15. }
  16. <div class="outer">
  17.     <div class="middle">
  18.         <div class="inner">
  19.             <p>
  20.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio perspiciatis quisquam provident asperiores. Accusamus eligendi, tempore architecto minus itaque maiores, recusandae sint nostrum quod, eaque voluptas harum asperiores sunt dolorem.
  21.             </p>
  22.         </div>
  23.     </div>
  24. </div>

注意：CSS3 的 flex，transform，grid 等内容都存在浏览器的兼容性问题！

博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2018年3月27日15:16:24
  • 除非特殊声明，本站文章均为原创，转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式，模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句，那么整个模板就会变得特别的臃肿，可读性和维护性将会降低，因此为了简化逻辑，我们可以使用计算属...
10月22日 7,757 评论
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用 debounce（防抖）和 thr...
10月14日 7,355 评论
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的，模块化是一种将系统分离成独立功能部分的方法，一个模块是为完成一个功能的一段程序或子程序，"模块"是系统中功能单一且可替换的部分。模块化思想...
10月12日 18,230 评论
匿名

发表评论 取消回复

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论：1   其中：访客  0   博主  0
    • 苏州会计网 苏州会计网 来自天朝的朋友 江苏省苏州市 移动 1
      2018年3月28日 下午2:04 1F
      回复

      测试测试