css实现元素居中的6种方法

  前言

  相信大家在面试的时候也会经常碰到css实现元素居中的方法,下面我介绍6种方法给大家,欢迎大家评论区交流。

  需求:

  给定两个元素,这两个元素是父子级关系

  并且两个元素的大小都是不确定的,那么这时候如何让子级在父级中上下左右都居中?(暂且设定父级比子级要大一些)。

  实现方案:

  1.最简单的方法

  父元素设置display:flex,子元素 margin: auto,代码如下:

  

  

  以上就是一些我们常用的垂直居中的方案。欢迎在评论区交流。