2021/1/14-每日三题第21弹：每天都说要早睡，你知道水平居中和垂直居中的方法有哪些吗 ？？？

前言：

朋友们好啊，俺又来了2333，嘻嘻嘻，今天还是老规矩，再给大家带来一个笑话啊😁😁😁，

一个人走进药店，问老板：老板，有没有治打嗝的药？

老板说：有啊。

于是拿出两种药让这个人挑‍，他正挑着，

老板大喝一声，吓得小明一哆嗦，药都掉地上。

顾客怒道：你有病啊！

老板笑着说：怎么样？让我这么一吓是不是好了。

顾客更生气了：打嗝的是我妈 ！！！

好了，话不多说，上题目！！！😍😍😍

题目：

(题目1) 说一下水平居中的方法 ？

(题目2) 说一下垂直居中的方法 ？

(题目3) 如何使用 CSS 实现硬件加速 ？

倒计时10min，开始计时，看看自己能做对几道题😎😎😎？参考解析在下面，但不要直接看解析哦，这样子没什么效果的！！！

参考解析：

题目1：

1.元素为⾏内元素，设置⽗元素 text-align:center
2.如果元素宽度固定，可以设置左右 margin 为 auto ;
3.如果元素为绝对定位，设置⽗元素 position 为 relative ，元素设置
  left:0;right:0;margin:auto;
4.使⽤ flex-box 布局，指定 justify-content 属性为center
5.display 设置为 tabel-ceil  

题目2：

1.将显示⽅式设置为表格， display:table-cell ,同时设置 vertial-align：middle
2.使⽤ flex 布局，设置为 align-item：center
3.绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
4.绝对定位中固定⾼度时设置 top:50%，margin-top 值为⾼度⼀半的负值
5.⽂本垂直居中设置 line-height 为 height 值

题目3：

1.硬件加速是指通过创建独⽴的复合图层，让GPU来渲染这个图层，从⽽提⾼性
  能
2.⼀般触发硬件加速的 CSS 属性有 transform 、 opacity 、 filter ，为了避免2D动画
  在开始和结束的时候的 repaint 操作，⼀般使⽤ tranform:translateZ(0)

怎么样，是不是很简单，你做对了几道题呢？做对的再接再厉，不要骄傲，做错的也没有关系啦，好好总结，继续努力 ！！！

当然啦，大家如果有补充的或者其它问题，欢迎大家在评论区交流啊，路漫漫其修远兮，吾将上下而求索，希望大家可以一起坚持下去啊 ！！！😎😎😎~~~

如果这篇文章能够帮助到您，希望您不要吝惜点赞👍👍和收藏💖💖，您的支持是我继续努力的动力 💪💪 ！！！