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