如何将块级元素水平居中和垂直居中?

块级元素

什么是块级元素呢?

定义:占据所有可用宽度,以换行的形式开始,可以给它设置宽高。

下面是一些常见的块级元素,不需要全部记住,但是要大概了解一下:
如何将块级元素水平居中和垂直居中?

块级元素水平居中

  1. 首先,我们可以使用外边距进行居中
    如何将块级元素水平居中和垂直居中?
    效果显示:
    如何将块级元素水平居中和垂直居中?

  2. 使用定位让元素居中(这个方法有一定风险)
    如何将块级元素水平居中和垂直居中?

  3. 使用弹性盒模型居中元素(display:flex; justify-content:center;)
    如何将块级元素水平居中和垂直居中?

块级元素垂直居中

  1. 通过盒模型垂直居中
    如何将块级元素水平居中和垂直居中?

  2. 同样可以用设置外边距使得元素居中

总结:还有很多方式让元素居中(水平和垂直),这里只是简单的列举了几个,希望对各位有用