块级元素
什么是块级元素呢?
定义:占据所有可用宽度,以换行的形式开始,可以给它设置宽高。
下面是一些常见的块级元素,不需要全部记住,但是要大概了解一下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2bcfb4fab1a86f98363a47adc14e1781.png)
块级元素水平居中
-
首先,我们可以使用外边距进行居中
![外边距居中](https://i-blog.csdnimg.cn/blog_migrate/c37567e7a6d1f6236296ee0344820b8e.png)
效果显示:
![效果显示](https://i-blog.csdnimg.cn/blog_migrate/71152c512817483eb629c2f7237add59.png)
-
使用定位让元素居中(这个方法有一定风险)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/15bda40ce02a491cb324ee018b8032b1.png)
-
使用弹性盒模型居中元素(display:flex; justify-content:center;)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b81df9bb623f342f6984e6783496938.png)
块级元素垂直居中
-
通过盒模型垂直居中
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/20881cc69e3b19d58b44552fef413358.png)
-
同样可以用设置外边距使得元素居中
总结:还有很多方式让元素居中(水平和垂直),这里只是简单的列举了几个,希望对各位有用