css|面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

一、背景

在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素

居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类：

居中元素（子元素）的宽高已知
居中元素宽高未知

二、实现方式

实现元素水平垂直居中的方式：

利用定位+margin:auto

利用定位+margin:负值

利用定位+transform

table布局

flex布局

grid布局

利用定位+margin:auto

先上代码：

<style>
    .father{
   
        width:500px;
        height:300px