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. C++ 模板基础

    我们学习使用C++,肯定都要了解模板这个概念.就我自己的理解,模板其实就是为复用而生,模板就是实现代码复用机制的一种工具,它可以实现类型参数化,即把类型定义为参数:进而实现了真正的代码可重用性.模版可 ...

  2. spring boot之从零开始开发自己的网站

    概述 首先要感谢两位大神,该项目的想法来源自tale和MyBlog,本项目的想法. 做了一些改造,增加了一些功能和一些代码的重构,并且更换了博客主题. 关于项目,对于开发的练手项目,能够工程化,严谨一 ...

  3. Kali Linux桥接模式配置DNS服务器

    操作环境: 虚拟机操作系统: Kali Linux 2017.2 虚拟化软件: VMWare Workstation 14 pro 操作前的准备: 在设置里将Kali的上网模式设置成"桥接模 ...

  4. difference between collection and association mapping in mybatis 3

    Mybatis处理“一对多”的关系时,需要用到associasion元素.处理”多对一“用collection元素来实现(这两个元素在之前mapper文件中提到过). 本例子中,假设一名User可以有 ...

  5. 激活IDEA 2017.3 mac版 2018.05.21亲测可用

    本文激活方式不会导致IEDA打不开,可激活一年,最简便方式,只需要30秒. 1.修改hosts sudo vim /private/etc/hosts 在文件最后一行中添加: 0.0.0.0 acco ...

  6. SVN汉化教程2017.10.6

    https://jingyan.baidu.com/album/b87fe19e95f5925219356853.html?picindex=4

  7. java基础学习周计划之2--面向对象

    JAVA面向对象第一天一. 知识点:1. 类和对象二. 关键问题(理论):1. 简述什么是类.什么是对象2. 简述基本类型变量与引用类型变量赋值时的差别3. 简述null的含义三. 关键代码(操作): ...

  8. 【BZOJ 1002】: [FJOI2007]轮状病毒

    题目大意:(略) 题解: 第一眼,这不是矩阵树裸体,看了看样例,心想3就有16,那100岂不是要上天…… 果然炸long long……emmmm该不会要打高精除吧……害怕,按照老师的话,不可能考高精除 ...

  9. 【强连通分量+概率】Bzoj2438 杀人游戏

    Description 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个人里面,查出谁是杀手. 警察能够对每一个人进行查证,假如查证的对象是平民,他会告诉警察,他认识的人, 谁是 ...

  10. dubbo+zookeeper的使用

    我们讨论过Nginx+tomcat组成的集群,这已经是非常灵活的集群技术,但是当我们的系统遇到更大的瓶颈,全部应用的单点服务器已经不能满足我们的需求,这时,我们要考虑另外一种,我们熟悉的内容,就是分布 ...