方法一:利用定位(常用方法,推荐)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(1)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(2)

方法二:利用 margin:auto;

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(3)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(4)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(5)

方法三:利用 display:table-cell

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(6)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(7)

方法四:利用 display:flex;设置垂直水平都居中

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(8)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(9)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(10)

方法五:计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(11)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(12)

方法六:利用 transform

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(13)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(14)

盒子垂直居右的几个方法(如何使一个盒子水平垂直居中)(15)

,