参考:CSS: 常用的元素居中方法

CSS居中布局总结

1.水平居中

(1)文本水平居中

text-align: center;

(2)块级元素水平居中

①设置margin

margin: auto;

②display:inline-block+text-align:center

        .parent {width: 400px;height: 400px;background-color: aquamarine;text-align: center;}.child {width: 100px;height: 100px;background-color: #43ff26;display: inline-block;}

这样可以使一块级元素拥有一些inline元素的特性。

③absolute+transform

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

④ flex+justify-content

.parent {width: 400px;height: 400px;background-color: aquamarine;display: flex;justify-content: center;}

2.垂直居中

(1)文本垂直居中

①设置line-height和父元素高度一致,只适合单行文本的情况下。

(2)块级元素垂直居中

①table-cell+vertical-align

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

优点:只需设置父节点,兼容性好

②absolute+transform

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

③ flex+align-items

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

3.水平垂直居中

(1)文本元素

text-align:center+line-height

(2)块级元素

①inline-block+text-align+table-cell+vertical-align

 .parent {text-align:center;display:table-cell;vertical-align:middle;}.child {display:inline-block;}

②absolute+transform

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

③flex+justify-content+align-items

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

④负margin(需精确计算长宽)

<div class="absolute_p1"><div class="absolute_c1"></div>
</div>

.absolute_p1 {position: relative;width: 200px; height: 200px;
}
.absolute_p1 .absolute_c1 {position: absolute; /* fixed 同理 */left: 50%;          top: 50%;width: 100px;       height: 100px;margin-left: -50px; margin-top: -50px;  /* 需根据宽高计算偏移量 */
}

  • 原理: 通过定位使元素左上角居中,再通过偏移值margin调整使元素中心居中
  • 缺点:高度宽度需事先知道,得通过其来计算负margin(好烦)

⑤定位实现居中(不需计算偏移值)

<div class="absolute_p2"><div class="absolute_c2"></div>
</div>

.absolute_p2 {position: relative;width: 200px; height: 200px;
}
.absolute_p2 .absolute_c2 {position: absolute; /* fixed 同理 */left: 0; top: 0; bottom: 0; right: 0; /* 定位为 0 */width: 100px; height: 100px;margin: auto; /* 不用计算偏移量 */
}

原理: 原理我也不知道啊!估计定位都给0了,元素自己也不知道该去哪儿,只好待在原地不知所措...

转载于:https://www.cnblogs.com/txwslyf/p/6894774.html

CSS常用的元素居中方法相关推荐

  1. css元素居中方法归纳

    水平和垂直方向都可居中 统一HTML代码: <div class="outer"><div class="inner"></div ...

  2. CSS样式之内容居中方法

    文章出自个人博客https://knightyun.github.io/2018/05/22/css-content-center,转载请申明. 水平居中 HTML中要实现某一内容水平居中显示,要通过 ...

  3. Android app UI自动化测试 常用的元素定位方法

    本文简要介绍了移动端Android APP进行UI自动化测试时,常用到的元素定位方法 目录 前言 一.通过resource-id定位 二.通过class name定位 三.通过accessibilit ...

  4. css样式隐藏元素的方法,你不知道的css隐藏元素的方法

    css隐藏元素是网页编写常用的方式,根据我的经验总结了以下几种css隐藏元素的方法. 记录 opacity opacity属性的隐藏方法主要是将元素透明度opacity设置为0,从而在视觉上就隐藏了元 ...

  5. 浅析jQuery中常用的元素查找方法总结

    $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素  $("div& ...

  6. jQuery常用的元素查找方法总结 .

    2019独角兽企业重金招聘Python工程师标准>>> ID选择器: $("#myELement") 选择id值等于myElement的元素, id值不能重复在文 ...

  7. 行内元素与块级元素居中方法

    一.行内元素 前言:觉得之前写的那篇关于水平居中.垂直居中.水平垂直居中的博客写的不太好,所以又整理了一遍. 之前博客的地址 1. 水平居中 方法一:text-algin:center 父元素设置:t ...

  8. CSS常用伪元素详解

    1. 伪元素概念 CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的.伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法 ...

  9. CSS常用子元素选择器-选择特定子元素

    选择器 举例 举例说明 :nth-of-type(n) p:nth-of-type(2) 选择其父级下的第二个p元素 :last-of-type p:last-of-type 选择其父级下的最后一个p ...

最新文章

  1. 最小割 ---- 集合冲突模型 ---- AGC038 F - Two Permutations[详解]
  2. H3CSE 380笔记
  3. DCS系统接地应用讨论
  4. TMG2010 之创建访问规则
  5. python中导入包中的__init__文件夹的一个重要作用(去年对文件名的导入)
  6. QT的QRegularExpressionValidator类的使用
  7. mysql解决select * from 表名 (where + 约束条件为空)
  8. Fater R-CNN 整体把握
  9. Alibaba Cloud Linux 2 开源后又有什么新动作?
  10. BootStrap笔记-分页
  11. 软银三亿重金押注的RPA到底是什么,它能取代人力吗?
  12. SQL结构化查询语言基础知识 转
  13. wpf 网易云歌词_网易云音乐粉丝半年涨500万,隔壁老樊为何成今年乐坛最大黑马 | 案例池...
  14. 竞品分析文档撰写总结
  15. 【无人机】【2017.10】无人机(UAV)在地学野外工作中建立增强型虚拟野外指南(EVFG)的作用研究
  16. 升级bigsur_苹果,Big Sur,新拟物化的兴起
  17. 怎么用计算机创建wifi,电脑如何设置wifi
  18. linux自动清除超出的文件,Linux下面自动清理超过指定大小的文件
  19. R语言的修仙之道--R语言之后天境界
  20. spring boot runner,destory监听

热门文章

  1. 骗子公司陆续公布中...
  2. Sql Server 关于整表插入另一个表部分列的语法以及select 语句直接插入临时表的语法 (转帖)...
  3. leetcode练习——数组篇(1)(std::ios::sync_with_stdio(false);std::cin.tie(nullptr);)
  4. 常用宏定义 - 系统相关
  5. C#与C/C++的交互zz
  6. SQLite/嵌入式数据库
  7. 在Atom中运行脚本
  8. ScaleAnimation动画
  9. 二、【List、Set、数据结构、Collections】
  10. java get方法不序列化_Java中的Json序列化,不容忽视的getter