居中对齐

居中总结

居中：盒子在其包含块中剧中

1.text-align:center

1. 行盒（行块盒）水平居中（行盒只能是常规流)
   ------直接设置行盒（行块盒）父元素 text-align:center

2.设置margin

1. 常规流块盒水平居中

• 定宽，设置左右margin为auto

2. 绝对定位元素的水平居中（absolute）

• 定宽，设置左右的坐标为0，将左右margin设为auto

  实际上，固定定位fixed是绝对定位absolute的特殊情况

3. 绝对定位的垂直居中

• 定高，设置上下的坐标为0top:0,bottom=0，将上下margin设置为auto

3.单行文本的垂直居中line-height

• 设置文本所在元素的行高line-height，为整个区域的高度

4.使用absolute（绝对定位)和transform反向偏移

• 让left和top都是50%

div的最左与屏幕的最左相距50%，垂直方向上一样left: 50%; top: 50%;

• 然后改变transform

transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了transform: translate(-50%,-50%);

5.关于Flexbox

• Flex容器（Flex Container）：父元素显式设置了display:flex
• Flex项目（Flex Items）：Flex容器内的子元素

• 使用 align-items 或 align-content 的属性

1. 给父元素设置display:flex;
2. justify-content: center;定义水平方向的元素位置
3. align-items: center;定义垂直方向的元素位置

关于flexbox某些属性 （部分）

属性	属性值	描述
flex-direction	row	默认属性：从左向右，水平排列
	column	Flex项目从上到下垂直排列
flex-wrap	wrap	Flex项目在Flex容器中就会多行排列
	nowrap	Flex容器内的Flex项目不换行排列
	wrap-revers	Flex项目在容器中多行排列，只是方向是反的
justify-content	flex-start	默认值：让所有Flex项目靠Main-Axis开始边缘（左对齐）
	flex-end	让所有Flex项目靠Main-Axis结束边缘（右对齐）。
	center	让所有Flex项目排在Main-Axis中间（居中对齐）