【css】实现居中的几种写法

flex 或 grid

父元素 display: flex 或者display: grid、jusitfy-content: center、align-items: center

flex/grid & margin

父元素 display: flex或者display: grid
子元素 margin: auto

position

父元素 position: relative
子元素 position: absolute；left: 50%；top: 50%；transform: translate(-50%, -50%)

table-cell

父元素 display: table-cell、vertical-align: middle、text-align: center
子元素 display: inline-block