search

JesseZhao1990 / blog

learing summary
MIT License
62 stars 7 forks source link

如何让一个长宽未知的元素在水平和垂直方向都居中之N种方法的总结 #141

Open JesseZhao1990 opened 6 years ago

JesseZhao1990 commented 6 years ago
  1. 利用flex 设置display：flex。利用flex的align-items:center让其垂直居中，利用justify-content:center让其水平居中 https://codepen.io/zhaojianxin/pen/yEgvdr
  2. 利用table 设置display：table。利用text-align:center让其水平居中，利用vertical-align：middle让其垂直居中 https://codepen.io/zhaojianxin/pen/vrXMaL
  3. 利用transform 设置position：relative。让子元素相对定位，相对父元素左侧和上侧为父元素的百分之50.然后再利用transform：translate（-50%，-50%）回移百分之50 https://codepen.io/zhaojianxin/pen/RJGOvG
  4. 利用grid 设置gird布局。利用align-item：center让其垂直居中。利用justify-content: center 让其水平居中 https://codepen.io/zhaojianxin/pen/oyBqgB
  5. 利用margin auto 设置position:absolute之后，设置距离父元素四边的距离都为0. 然后设置margin：auto https://codepen.io/zhaojianxin/pen/gKgKeR