块级元素
什么是块级元素呢?
定义:占据所有可用宽度,以换行的形式开始,可以给它设置宽高。
下面是一些常见的块级元素,不需要全部记住,但是要大概了解一下:
![如何将块级元素水平居中和垂直居中? 如何将块级元素水平居中和垂直居中?](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzc2Lzc5OWZmM2JmNGY2NTdlY2VkNjJhNTFjNzVlZGNjMTBjLnBuZw==)
块级元素水平居中
-
首先,我们可以使用外边距进行居中
![如何将块级元素水平居中和垂直居中? 如何将块级元素水平居中和垂直居中?](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzcwOC8yMjEwYmNjMGM0NmZiOGJkZTAzNTJkOTMzYmYxNDM4NC5wbmc=)
效果显示:
![如何将块级元素水平居中和垂直居中? 如何将块级元素水平居中和垂直居中?](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzY1My8xMzRiNTgzNzVlZjVmZDU1NWM2YjA4NjBiMjA5ZDE1NS5wbmc=)
-
使用定位让元素居中(这个方法有一定风险)
![如何将块级元素水平居中和垂直居中? 如何将块级元素水平居中和垂直居中?](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzM0MC9lNDVhZGY3YjUzMmE2MzM4MTYyYmViZTJhYjBkZTJkYy5wbmc=)
-
使用弹性盒模型居中元素(display:flex; justify-content:center;)
![如何将块级元素水平居中和垂直居中? 如何将块级元素水平居中和垂直居中?](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzQ0OS8wMzA1OTk3OTUwNzJjYzdiNzJjNTA5NTAyNzljYjg2MS5wbmc=)
块级元素垂直居中
-
通过盒模型垂直居中
![如何将块级元素水平居中和垂直居中? 如何将块级元素水平居中和垂直居中?](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzkxOC82NjVjMDI4NzcwOWM3YjVhYmY3NTA4ZjcwMzYxOGI1ZS5wbmc=)
-
同样可以用设置外边距使得元素居中
总结:还有很多方式让元素居中(水平和垂直),这里只是简单的列举了几个,希望对各位有用