块元素行内元素水平垂直居中方式

水平居中：

①行内元素(或行内块元素)包含在块元素里时可将元素看作是父元素中的文本，父元素(块元素设置text-align:center;)

 ②1.块元素定宽时，设置margin: auto;即可实现水平居中

②2.块元素定宽时，设置position定位实现水平居中 

②3.块元素定宽时，设置position定位+transform: translate实现水平居中 

③不定宽时，利用flex布局 (display: flex; + justify-content: center;)

垂直居中：

对应① 设置height=line-height;即可实现行内元素在块元素中垂直居中效果

  对应②2. 同理设置position定位实现块元素垂直居中

对应②3. 同理设置position定位+transform:translate实现块元素垂直居中

行内元素、行内块元素利用vertical-align实现垂直居中

使用后👇

flex如何设置元素水平垂直居中？⭐

设置水平居中：justify-content: center;(给父元素添加)

设置垂直居中：align-items: center;(单行情况下，给父元素添加)

                         align-content: center;(多行情况下，给父元素添加)

                         align-self: center;(给子元素添加)