CSS常用的元素居中方法
参考: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常用的元素居中方法相关推荐
- css元素居中方法归纳
水平和垂直方向都可居中 统一HTML代码: <div class="outer"><div class="inner"></div ...
- CSS样式之内容居中方法
文章出自个人博客https://knightyun.github.io/2018/05/22/css-content-center,转载请申明. 水平居中 HTML中要实现某一内容水平居中显示,要通过 ...
- Android app UI自动化测试 常用的元素定位方法
本文简要介绍了移动端Android APP进行UI自动化测试时,常用到的元素定位方法 目录 前言 一.通过resource-id定位 二.通过class name定位 三.通过accessibilit ...
- css样式隐藏元素的方法,你不知道的css隐藏元素的方法
css隐藏元素是网页编写常用的方式,根据我的经验总结了以下几种css隐藏元素的方法. 记录 opacity opacity属性的隐藏方法主要是将元素透明度opacity设置为0,从而在视觉上就隐藏了元 ...
- 浅析jQuery中常用的元素查找方法总结
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div& ...
- jQuery常用的元素查找方法总结 .
2019独角兽企业重金招聘Python工程师标准>>> ID选择器: $("#myELement") 选择id值等于myElement的元素, id值不能重复在文 ...
- 行内元素与块级元素居中方法
一.行内元素 前言:觉得之前写的那篇关于水平居中.垂直居中.水平垂直居中的博客写的不太好,所以又整理了一遍. 之前博客的地址 1. 水平居中 方法一:text-algin:center 父元素设置:t ...
- CSS常用伪元素详解
1. 伪元素概念 CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的.伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法 ...
- CSS常用子元素选择器-选择特定子元素
选择器 举例 举例说明 :nth-of-type(n) p:nth-of-type(2) 选择其父级下的第二个p元素 :last-of-type p:last-of-type 选择其父级下的最后一个p ...
最新文章
- 最小割 ---- 集合冲突模型 ---- AGC038 F - Two Permutations[详解]
- H3CSE 380笔记
- DCS系统接地应用讨论
- TMG2010 之创建访问规则
- python中导入包中的__init__文件夹的一个重要作用(去年对文件名的导入)
- QT的QRegularExpressionValidator类的使用
- mysql解决select * from 表名 (where + 约束条件为空)
- Fater R-CNN 整体把握
- Alibaba Cloud Linux 2 开源后又有什么新动作?
- BootStrap笔记-分页
- 软银三亿重金押注的RPA到底是什么,它能取代人力吗?
- SQL结构化查询语言基础知识 转
- wpf 网易云歌词_网易云音乐粉丝半年涨500万,隔壁老樊为何成今年乐坛最大黑马 | 案例池...
- 竞品分析文档撰写总结
- 【无人机】【2017.10】无人机(UAV)在地学野外工作中建立增强型虚拟野外指南(EVFG)的作用研究
- 升级bigsur_苹果,Big Sur,新拟物化的兴起
- 怎么用计算机创建wifi,电脑如何设置wifi
- linux自动清除超出的文件,Linux下面自动清理超过指定大小的文件
- R语言的修仙之道--R语言之后天境界
- spring boot runner,destory监听
热门文章
- 骗子公司陆续公布中...
- Sql Server 关于整表插入另一个表部分列的语法以及select 语句直接插入临时表的语法 (转帖)...
- leetcode练习——数组篇(1)(std::ios::sync_with_stdio(false);std::cin.tie(nullptr);)
- 常用宏定义 - 系统相关
- C#与C/C++的交互zz
- SQLite/嵌入式数据库
- 在Atom中运行脚本
- ScaleAnimation动画
- 二、【List、Set、数据结构、Collections】
- java get方法不序列化_Java中的Json序列化,不容忽视的getter