HTML中经常用到的对齐，居中方式

Posted 2023-01-03 shouhaibin

在编写一片网页时，我们经常需要使一些文本或者图片，盒子居中!但是在众多的写法里，那些才能使我们的目的最快，最有效的达到呢!

居中也是有轴线之分的，水平轴，垂直于水平轴的轴，交叉轴。

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 （常规流和弹性项目【不用定宽】）
弹性盒设置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%）