CSS居中完全指南——构建CSS居中决策树

1.Horizontally 水平居中

1.1 inlineinline-*元素水平居中

给需要居中的元素一个block父元素,需要居中子元素为 文本 或者 inline, inline-block, inline-table, inline-flex

核心代码

.center-children {
text-align: center;
}

JSbin演示地址
效果:

1.2block元素水平居中

父元素为block,子元素也为bolck,且子元素设置了宽度(没宽度子元素就继承父元素宽度,居中没有意义).
无论正在居中块级元素的宽度或父级的宽度如何,都会起作用。

方法:子元素margin: 0 auto;左右外边距设置为自动填充

核心代码

.center-me {
margin: 0 auto;
}

效果:

block元素水平居中JSbin演示地址

1.3多个block元素水平居中

1.3.1 多个block元素一行排列水平居中

  • 方法一:利用inline-block,原理是将子元素转化为inline-block.再用text-align: center;
  • 方法二:利用display: flex.注意:子元素高度会保持一致.看下方例子.

核心代码:

.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
} .flex-center {
display: flex;
justify-content: center;
}

效果:


多个block元素一行排列水平居中JSbin演示地址

1.3.2 多个block元素每行一个水平居中

因为每个block元素独占一行,所以方法仍然是margin: 0 auto;

演示:

多个block元素每行一个水平居中JSbin演示

2.Vertically垂直居中

垂直居中比较麻烦

2.1 inlineinline-* 元素单行垂直居中

需要垂直居中的元素为单行的inlineinline-* 元素,例如一个text或者a链接(包括a链接变化而成的按钮)

2.1.1 方法一:上下使用相同的padding(推荐)

上下和左右使用相同的padding可以不用设置宽高,既可以在修改文本内容是自适应,又可以减少出现BUG的几率.
核心代码:

.link {
padding-top: 30px;
padding-bottom: 30px;
}

演示:

方法一:上下使用相同的paddingJSbin演示地址

2.1.2 方法二:设置line-height与高度相同

核心代码

.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
/*nowrap文本内的换行无效内容只能在一行显示*/
}

设置line-height与高度相同JSbin演示地址

2.2 多行文本垂直居中

多行文本使用增加上下padding垂直居中的方法仍然有效且良好,不需设置宽高,推荐使用.
如果这样做不起作用,那么文本所在的元素可能是table或者table-cell元素,无论是真正的table还是后期自己添加的CSS.
下面说说这两种情况使用其他方法的垂直居中.

2.2.1:方法一:display: table;vertical-align: middle;

核心代码:

.center-table {
display: table; }
.center-table p {
display: table-cell;
vertical-align: middle;
}

table+vertical-align: middle多行文本垂直居中JSbin演示

2.2.2 使用flex布局多行文本居中

一个flex-child可以简单地在flex-parent的中心.
核心代码

.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}

使用flex多行文本居中JSbin演示地址

2.3 block元素垂直居中

2.3.1已知block元素高度

原理是绝对定位,top: 50%;然后 margin-top设置为负边距且值为他本身高度的一半.
核心代码:

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

注意:使用 position: absolute;绝对定位会使元素脱离文档流

已知block元素高垂直居中演示

2.3.2 block元素高度未知垂直居中

借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
核心代码:

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

transform用法


block元素高度未知垂直居中JSbin演示

2.3.3 使用flex布局block元素高度未知垂直居中

核心代码:

.parent {
display: flex;
flex-direction: column;
justify-content: center;
}

用flex布局block元素高度未知垂直居中JSbin演示

3.Both Horizontally and Vertically水平垂直居中

3.1有固定宽高的元素

核心代码:
依旧是绝对定位+宽高一半的负边距

.parent {
position: relative;
} .child {
width: 300px;
height: 100px;
padding: 20px; position: absolute;
top: 50%;
left: 50%; margin: -70px 0 0 -170px;
}

有固定宽高的元素JSbin演示

3.2 宽高不固定

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

核心代码

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

宽高不固定水平垂直居中JSbin演示

3.3 使用flex布局垂直水平居中

核心代码:

.parent {
display: flex;
justify-content: center;
align-items: center;
}

使用flex布局垂直水平居中JSbin演示

3.4 使用grid布局垂直水平居中

核心代码:

body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}

使用flex布局垂直水平居中JSbin演示

CSS居中完全指南——构建CSS居中决策树的更多相关文章

  1. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

  2. css居中完全指南(翻译)

    最近参加了百度的前端技术学院,任务4是要求一个元素在父元素中水平和垂直居中,提供的一篇文章对各种情况都进行了分析,很不错,英文也不是那么难懂,毕竟代码还是主体,翻译过来分享出来,翻译内容带有自己的理解 ...

  3. !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  4. css垂直居中怎么设置?文字上下居中和图片垂直居中

    css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...

  5. 右边根据左边的高度自动居中只需要两行CSS就可以完成

    右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...

  6. CSS权威指南之css声明,伪类,文本处理--(简要笔记一)

    1.css层叠的含义 后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒.   3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换 ...

  7. Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)

    本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换

  8. CSS Flexbox 学习指南、工具与框架

    Flexbox 是一种更有效的布局方式,它能更好的分配容器空间,并控制项目的对齐.虽然,掌握它的理论有些复杂,但幸运的是,我们可以借助开放的网络来学习并逐步掌握它. 在本文中,我们整合了一些最佳的 F ...

  9. HTML 5与CSS 3权威指南(第2版·上册) 中文pdf扫描版​

    HTML5与CSS3权威指南(第2版·上册)已经成为HTML 5与CSS 3图书领域的一个标杆,被读者誉为“系统学习HTML 5与CSS 3技术的最佳指导参考书之一”和“Web前端工程师案头必备图书之 ...

随机推荐

  1. iOS应用将强制使用HTTPS安全加密-afn配置https(190926更新)

    WWDC 2016苹果开发者大会上,苹果在讲解全新的iOS10中提到了数据安全这一方面,并且苹果宣布iOS应用将从2017年1月起启用名为App Transport Security的安全传输功能. ...

  2. nslookup、dig、host

    1.作用:查询域名对应的地址或者地址对应的域名 2.nslookup已经不建议使用,慢慢就会废弃,建议使用dig和host代替 3.格式 dig: dig @NameServer 域名 Type ho ...

  3. Java ——集合框架 list lambda set map 遍历方法 数据结构

    本节重点思维导图 集合框架 有序无序:元素放入的顺序与取出的顺序是否一致,一致即为有序,不一致即无序. List:允许重复.有序 ArrayList:长度可变的数组,遍历速度快 LinkedList: ...

  4. 【Python】我的豆瓣短评爬虫的多线程改写

    对之前我的那个豆瓣的短评的爬虫,进行了一下架构性的改动.尽可能实现了模块的分离.但是总是感觉不完美.暂时也没心情折腾了. 同时也添加了多线程的实现.具体过程见下. 改动 独立出来的部分: MakeOp ...

  5. python pandas 自动生成批量测试数据插入数据库 mysql

    1.python连接数据库游标 # coding:utf-8 from sqlalchemy import create_engine class connet_databases: def __in ...

  6. Java数据结构之递归(Recursion)

    1. 递归解决问题 各种数学问题如:8皇后问题,汉诺塔,阶乘问题,迷宫问题,球和篮子的问题(google编程大赛) 各种算法中也会使用到递归,比如快速排序,归并排序,二分查找,分治算法等 将用栈解决的 ...

  7. [BZOJ3133] [Baltic2013]ballmachine(树上倍增+堆)

    [BZOJ3133] [Baltic2013]ballmachine(树上倍增+堆) 题面 有一个装球机器,构造可以看作是一棵树.有下面两种操作: 从根放入一个球,只要下方有空位,球会沿着树滚下.如果 ...

  8. jquery中的插件EChars的使用

    首先,进入EChars的官网下载页面:http://echarts.baidu.com/download.html    下载自己需要的版本. 引入jquery包和echars,进入官网的实例:htt ...

  9. django报错处理:对应ip无法登陆与使用bootstrap移动端响应工具,head响应实例

    1.报错 Invalid HTTP_HOST header: '192.168.1.100:8000'. You may need to add '192.168.1.100' to ALLOWED_ ...

  10. nodeJS打包安装和问题处理

    一,执行步骤,打包报错 1,查看npm版本npm -v 2,查看gulp版本(报错怎么证明没安装)gulp --version 3,安装gulpnpm install --global gulp-cl ...