HTML中经常⽤到的对齐，居中⽅式
在编写⼀⽚⽹页时，我们经常需要使⼀些⽂本或者图⽚，盒⼦居中!但是在众多的写法⾥，那些才能使我们的⽬的最快，最有效的达到呢!居中也是有轴线之分的，⽔平轴，垂直于⽔平轴的轴，交叉轴。
1盒⼦居中 margin：auto；通常在这此⾏只有⼀个盒⼦的情况下使⽤[需要定宽-常规流和浮动不⽤]
2⽂本居中
定义⽔平轴线对齐⽅式
flex-start 项⽬位于在主轴起点
flex-end 项⽬位于主轴终点
center 项⽬在中间
space-between 两端对齐，项⽬之间的间隔都相等（开头和最后与⽗元素没有间隔）
space-around 项⽬之间间隔相等，与⽗元素的边距是间隔的⼀半
space-evenly 项⽬与⽗元素的间距是⼀样的
定义属性在交叉轴如何对齐 align-items
align-items：flex-start 交叉轴起点对齐
align-items：flex-end 交叉轴终点对齐
align-items:center 交叉轴中点对齐
align-items：baseline 项⽬第⼀⾏⽂字基线对齐
align-items：stretch 项⽬未设置⾼度或者设置为auto，将占满整个容器⾼度
定义多根轴线对齐⽅式 align-content多⾏的时候⽤
align-content:flex-start 交叉轴起点对齐
align-content:flex-end 交叉轴终点对齐
align-content:center 交叉轴中点对齐
align-content:space-around 间距相等；轴之间的间距⽐边框间距⼤⼀倍
align-content:space-between 交叉轴两端对齐，轴间距平均分布
⽔平居中
定宽 margin：auto （常规流和弹性项⽬【不⽤定宽】）
html怎么让所有内容居中弹性盒设置justify-content:center 让弹性项⽬在主轴上居中
⽗元素设置text-align:center 让内部⾏盒和块盒居中
相对定位元素 margin-left:50%; transform：translateX(-50%) margin是项⽬的宽度【终极】
垂直居中
单⾏⽂本垂直居中 line-height 为项⽬的⾼度
弹性盒 align-items:center 让项⽬在垂直轴居中
相对定位元素 top：50%；transform：translateY（-50%）【终极】
相对定位元素垂直居中
left：50%；top：50%；transform：translate（-50%，-50%）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。