css对齐方案总结

垂直居中

通用布局方式(内敛元素和块状元素都适用)

  1. 利用flex:
    核心代码:

    1
    2
    3
    4
    5
    .container{
    display:flex;
    flex-direction:column;
    justify:center
    }
  2. 利用transformX(-50%):
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .container{
    width: 300px;
    height: 300px;
    background: red;
    position:relative;
    }
    .child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    }

内敛元素的垂直居中

单行内敛元素:设置内敛元素的高度和行高相等
核心代码:

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

块状元素

  1. 固定元素高度的块状元素
    核心代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .container{
    position: relative;
    }
    .child{
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
    }
  2. 未知高度的块状元素
    当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
    核心代码:

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

水平居中

通用布局方式

  1. flex布局
    核心代码:

    1
    2
    3
    4
    .container{
    display: flex;
    justify-content: center;
    }
  2. absoulte+transform
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    .container{
    position:relative;
    }
    .child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    }

内敛元素水平居中

  1. text-align:center
    核心代码:

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

块状元素水平居中

  1. 使用 margin:0 auto 必须注明子元素和父元素的宽度
    核心代码:

    1
    2
    3
    .container{
    margin:0 auto
    }
  2. 多块状元素:
    利用内敛元素布局方式container属性为text-align:center;
    核心代码:

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

水平垂直居中

固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半,使元素水平垂直居中。
核心代码:

1
2
3
4
5
6
7
8
9
10
11
12
.container {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}

未知宽高元素水平垂直居中

  1. 利用2D变换,在水平和垂直两个方向都向反向平移宽高的一半,从而使元素水平垂直居中。
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .parent {
    position: relative;
    }
    .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
  2. 利用flex布局
    利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
    核心代码:

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

相对于 body 的水平垂直居中

  1. 列表布局(兼容性好)
    核心代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    } .middle {
    display: table-cell;
    vertical-align: middle;
    } .inner {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    }
  2. position 布局
    核心代码

    1
    2
    3
    4
    5
    6
    7
    8
    .container{
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    }

css对齐方案总结的更多相关文章

  1. webpack css压缩方案

    css-loader原有的minimize选项在1.0.0版本已经移除,不能使用其进行css压缩. 目前可行的css压缩方案有: 1. postcss-loader with cssnano or u ...

  2. 最新CSS兼容方案

    CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...

  3. css对齐

    2016-10-25 <css入门经典>第15章 1.text-align属性: 块属性内部的文本对齐方式.该属性只对块盒子有意义,内联盒子的内容没有对齐方式.(注意:只是盒子内部的内容对 ...

  4. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  5. css垂直居中方案

    先介绍几种常见的垂直布局方式: 已知盒子具体宽度(宽度可以为百分比)(适用于居中浮动元素) 第一种: 给父元素相对定位,给子元素绝对定位 父布局 { position: relative; } 子布局 ...

  6. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  7. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

  8. 全场景效能平台猪齿鱼常用的前端css实现方案

    ​ 居中 最常用的height + line-height,以及margin:0 auto的居中方式就不再阐述,以下介绍两种容错性高的实现方案. flex布局实现 ​ 猪齿鱼前端日常开发中,我们多以f ...

  9. 猪齿鱼平台常用前端css实现方案

    居中 最常用的height + line-height,以及margin:0 auto的居中方式就不再阐述,以下介绍两种容错性高的实现方案. flex布局实现 ​ 猪齿鱼前端日常开发中,我们多以fle ...

随机推荐

  1. Python(2)深入Python函数定义

    Python学习 Part2:深入Python函数定义 在Python中,可以定义包含若干参数的函数,这里有几种可用的形式,也可以混合使用: 1. 默认参数 最常用的一种形式是为一个或多个参数指定默认 ...

  2. 可能是史上最全的机器学习和Python(包括数学)速查表

    新手学习机器学习很难,就是收集资料也很费劲.所幸Robbie Allen从不同来源收集了目前最全的有关机器学习.Python和相关数学知识的速查表大全.强烈建议收藏! 机器学习有很多方面. 当我开始刷 ...

  3. eclipse下的tomcat配置https(最简单得配置https)

    近期公司列出一大堆的东西,其中包括https,啥也不想说,你们是无法理解的苦逼的我的 本文不是双向认证, 双向认证需要让客户端信任自己生成的证书,有点类似登录银行网站的情,如果想知道双向认证的同志可以 ...

  4. String的split()方法可以将字符串按照特定的分隔符拆分成字符串数组

    在java.lang包中有String.split()方法,返回是一个数组------不管按照什么拆,拆出来是一个数组 String str = "1,2,3,4,5,6"; St ...

  5. 构建基于Netty 的HTTP/HTTPS 应用程序

    HTTP/HTTPS是最常见的协议套件之一,并且随着智能手机的成功,它的应用也日益广泛,因为对于任何公司来说,拥有一个可以被移动设备访问的网站几乎是必须的.这些协议也被用于其他方面.许多组织导出的用于 ...

  6. 提示“本地连接没有有效的ip配置-未修复“窗口

    很多人在使用电脑时可能会遇到了这样一个网络问题,电脑无法连接网络,使用自带网络诊断工具诊断提示:"本地连接没有有效的ip配置".这种网络故障多数是出在使用路由器共享上网的windo ...

  7. golang接口三个特性

    类型和接口 因为映射建设在类型的基础之上,首先我们对类型进行全新的介绍.go是一个静态性语言,每个变量都有静态的类型,因此每个变量在编译阶段中有明确的变量类型,比如像:int.float32.MyTy ...

  8. NOIP2013华容道 大爆搜

    预处理出每个点周围四个点互相到达的最短路,再在整个图上跑SPFA,要记录路径 #include<cstdio> #include<cstring> #include<io ...

  9. BZOJ_2238_Mst_树剖+线段树

    BZOJ_2238_Mst_树剖+线段树 Description 给出一个N个点M条边的无向带权图,以及Q个询问,每次询问在图中删掉一条边后图的最小生成树.(各询问间独立,每次询问不对之后的询问产生影 ...

  10. BZOJ_1433_[ZJOI2009]假期的宿舍_二分图匹配

    BZOJ_1433_[ZJOI2009]假期的宿舍_二分图匹配 题意: 学校放假了······有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如A 和B都是学校的学生,A要回 ...