.parent {position: relative;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}复制代码利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 margin 负值来调整元素的中心点到页面的中心 。该方法适用于盒子宽高已知的情况
.parent {position: relative;}.child {position: absolute;top: 50%;left: 50%;margin-top: -50px;/* 自身 height 的一半 */margin-left: -50px;/* 自身 width 的一半 */}复制代码使用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中 。该方法要考虑兼容的问题，该方法在移动端用的较多：
.parent {display: flex;justify-content:center;align-items:center;}复制代码另外，如果父元素设置了flex布局，只需要给子元素加上margin:auto;就可以实现垂直居中布局
.parent{display:flex;}.child{margin: auto;}复制代码这里蛮有意思的 如果不在弹性布局中 margin:auto;只能做到水平居中
这其中的道理可以看这篇文章了解一下（具体就是与auto的定义有关）
实现一个三角形css 绘制三角形主要用到的是 border 属性，也就是边框 。
平时在给盒子设置边框时，往往都设置很窄，就可能误以为边框是由矩形组成的 。实际上，border 属性是三角形组成的，下面看一个例子：
div {width: 0;height: 0;border: 100px solid;border-color: orange blue red green;}复制代码将元素的长宽都设置为 0，显示出来的效果是这样的：
文章插图
所以可以根据 border 这个特性来绘制三角形：
- 三角 1
div {width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid transparent;border-left: 50px solid transparent;}复制代码
文章插图
- 三角 5
div {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}复制代码
文章插图
还有很多，就不一一实现了，总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度 。
实现一个扇形用 CSS 实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个 90° 的扇形：
div{border: 100px solid transparent;width: 0;height: 0;border-radius: 100px;border-top-color: red;}复制代码
文章插图
实现一个宽高自适应的正方形
- 利用 vw 来实现：
.square {width: 10%;height: 10vw;background: tomato;}复制代码- 利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现：
.square {width: 20%;height: 0;padding-top: 20%;background: orange;}复制代码- 利用子元素的 margin-top 的值来实现：
.square {width: 30%;overflow: hidden;background: yellow;}.square::after {content: '';display: block;margin-top: 100%;}复制代码画一条 0.5px 的线采用 transform: scale()的方式，该方法用来定义元素的 2D 缩放转换：transform: scale(0.5,0.5);复制代码采用 meta viewport 的方式<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>复制代码这样就能缩放到原来的 0.5 倍，如果是 1px 那么就会变成 0.5px 。viewport 只针对于移动端，只在移动端上才能看到效果设置小于 12px 的字体在谷歌下 css 设置字体大小为 12px 及以下时，显示都是一样大小，都是默认 12px 。
解决办法：
- 使用 Webkit 的内核的-webkit-text-size-adjust 的私有 CSS 属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了 。但是 chrome 更新到 27 版本之后就不可以用了 。所以高版本 chrome 谷歌浏览器已经不再支持-webkit-text-size-adjust 样式，所以要使用时候慎用 。
- 使用 css3 的 transform 缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用 display：block/inline-block/...；
推荐阅读
- 国产web端开源ui组件-通用前端ui界面组件库
- 不可不知的sql扫描、注入利器sqlmap——实战演示sqlmap进阶命令
- 微前端架构技术解析
- 前端必懂面试题之浏览器输入URL之后发生了什么
- 新司机进阶宝典：用车三大常见问题，买车君逐一击破！
- 前端：何为跨域，如何跨域
- 解如何利用CORS跨域，是时候让前端来指挥一次后端同学开发了
- 5个你可能不知道的苹果Mac使用技巧！进阶必备
- 八零后弃外企高薪销售 改行做茶膏
- 前端正则表达式书写以及常用的方法
![[邓锄头挖科技]“泛在网络”机器之间互通的智能社区如何给人带来方便？](https://imgcdn.toutiaoyule.com/20200323/20200323122321961748a_t.jpeg)
