快来学习一下吧！Web前端开发CSS居中的五大方式
学习css大家是不是对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？今天小编在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！
下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素
设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色
css居中方式1
这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素，并使得样式为inline-block;height:100%;就是和父元素一样高，vertical-align:middle;垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div一样高，所以相当于p元素在div里垂直居中。
css居中方式2
这里利用了定位居中
子元素p设置position：absolute脱离文档流,默认以html作为父元素，所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使用这种方式来移动），最后margin:auto;就会水平和垂直都居中。
css居中方式3
这里利用了弹性盒居中
父元素div设置成弹性盒样式，justify-content:center;主轴居中
align-items:center;垂直居中（而且这两个只能设置在父元素上，弹性盒知识）
css居中方式4
利用定位线左上角居中，然后左移子元素宽度的一半，再上移子元素高度的一半。
css居中方式5
利用动画移动属性transform
结语
相信看了上面的有关Html5、css的元素五大居中方式，你们就可以解决自己的小问题了，但是也要养成一个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Comeon！
快来学习一下吧！Web前端开发CSS居中的五大方式相关推荐
- Web前端自学之路学习路线，web前端开发网站
前端开发作为一个由网页制作演变成的新兴岗位,其实在国内外来说,受到重视的时间并不长,在前几年间技术快速的发展和其应用普及率的迅猛增长,使得前端人才市场一片盛况空前的景象,由于其的易入门性和不错的发展前 ...
- Web前端开发——CSS样式（Ⅰ）文本与文字样式
目录 1. 单位 2. 颜色 3. 文本 3.1 字符间距letter-spacing 3.2 行高line-height 3.2.1 基本概念 3.2.2 行高的应用--居中垂直对齐效果 3.3 对 ...
- web前端学习路线图，WEB前端开发新手学习路线
前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握,下面给大家一份详细的表单: 我还是 ...
- Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
- 【web前端开发 | CSS】页面布局之定位
思维导图 (案例放在文章结尾) 文章目录 思维导图 一:定位 1.1:静态定位(position:static:) 1.2:相对定位(position:relative:) 1.3:绝对定位(posi ...
- Web前端开发css基础样式总结
颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单 ...
- Web前端开发——CSS样式之CSS选择器
1. CSS选择器类型 css选择器可分为标签选择器.类别选择器.ID选择器,这里的三种类型主要针对内嵌样式和单独文件样式而言 1.1 标签选择器 1.1.1 测试代码 <!DOCTYPE ht ...
- 【web前端开发 | CSS】css元素的显示模式
思维导图 一:元素显示模式分类 *网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页. *元素显示模式就是元素(标签)以什么方式进行显示,比如<div> ...
- 【web前端开发 | CSS】页面布局之盒子模型
思维导图 文章目录 思维导图 1:边框 2:内边距 3:外边距 外边距合并 1. 相邻块元素垂直外边距的合并 2. 嵌套块元素垂直外边距的塌陷 所谓 盒子模型:就是把 HTML 页面中的布局元素看作是 ...
最新文章
- linux lua 交叉编译,交叉编译 XXX含义与作用
- SQLServer多实例更改默认实例
- Berkeley DB——Database
- Java的类(class)、包(package)和接口(interface)
- MatConvnet中集成的损失函数（孪生网络的思考）
- ZOJ - 4122 Triangle City(最短路+欧拉通路+思维)
- 2019计算机开机号003期,2019年011期福彩中心开机号（附汇总）
- linux配置sonarqube遇到的坑
- 基于高程的地面点云信息提取
- 网页版excel数据批量导入数据库
- web安全工具 御剑后台扫描layer子域名挖掘机
- 如何退出企业微信？退出之后，企业微信的聊天记录还在吗？
- 整理苹果官网上iOS的各种辅助功能
- 2020年遥感类期刊SCI期刊影响因子排名—遥感, 地理, 水文类
- C# *未能找到类型“ * ”,请确保已引用包含此类型的程序集。如果此类型为开发项目的一部分，请确保已使用针对当前平台或任意 CPU 的设置成功生成该项目
- 识别植物的软件有哪些？快把这些软件收好
- 微信公众号服务器瘫痪的现象,微信出现大范围故障瘫痪30分钟 现已恢复正常
- .gitignore
- BAISS的动态分布式搜索存储协议（DDSSP）究竟是什么？
- 2022数学建模国赛C题思路分析