html布局中关于css文本居中问题相关描述

文本居中:

文本
文本水平对齐方式（css样式中）
语法：text-align: center(居中对齐)|left(左对齐)| right(右对齐)|justify(两端对齐);
定位
屏幕窗口的居中
1.已知大小的元素在屏幕窗口水平垂直都居中
元素{
width:200px;
height:100px;
position:fixed;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
2.未知大小的元素在屏幕窗口水平垂直都居中
元素{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
子元素在父元素中居中
1.已知大小的子元素在父元素中居中
父元素{position:relative;}
子元素{
width:200px;
height:100px
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
2.未知大小的子元素在父元素中居中
父元素{position:relative;}
子元素{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}

水平居中问题
1.内联元素水平居中
如果被设置元素为文本，图片等行内元素时，水平居中是通过给父元素添加text-align:center;来实现的
2.定宽块元素水平居中
满足定宽和块状两个条件，那么水平居中可以通过给元素添加左右margin为auto来实现
margin:0 auto;
3.不定宽块元素水平居中
方案一：父元素{display:table;margin:0 auto;}
注：display:table; 就是将元素转换为表格形式
方案二：父元素{text-align:center;} 子元素{display:inline-block;}
垂直对齐方式
语法：vertical-align:baseline(默认值)|top(顶部对齐)|middle(中部对齐)|bottom(底部对齐);
注：a) 应用在表格单元格内容的垂直对齐方式设置
b) 设置行内元素所在行基线的垂直对齐方式

弹性布局display：flex
主轴对齐方式
语法：justify-content:flex-start|flex-end|center|space-between|space-around;
flex-start 对齐主轴的起点
flex-end 对齐主轴的终点
center 居中对齐
space-between flex项目两端对齐，中间间隔相等
space-around flex项目两侧间隔相等
设置交叉轴对齐方式
语法：align-items:flex-start|flex-end|center|baseline|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
baseline flex项目第一行文字基线对齐
stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度

※※★ 已知（或未知）大小的元素在屏幕窗口水平垂直都居中
html,body{height:100%;}
让html和body的高度都等于浏览器窗口的高（窗口高度自适应）
body{ display:flex;
justify-content:center;
align-items:center;
}
※※★ 已知（或未知）大小的子元素在父元素中水平垂直都居中
父元素{ display:flex;
justify-content:center;
align-items:center;
}

设置多根轴线对齐方式（如果只有一行，该属性不起作用）
语法：align-content:flex-start|flex-end|center|space-between|space-around|stretch;
flex-start 对齐交叉轴的起点
flex-end 对齐交叉轴的终点
center 以交叉轴为参考，居中对齐
space-between 轴线两端对齐，中间间隔相等
space-around 每根轴线两侧间隔相等

设置某个flex项目单独的交叉轴对齐方式
语法：align-self:flex-start|flex-end|center|baseline|stretch;

★ 使用css3变形的方式来实现已知或未知大小的元素在屏幕窗口水平垂直都居中
元素{
position:fixed;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%);
}
★ 使用css3变形的方式来实现未知或已知大小的子元素在父元素中水平垂直都居中
父元素{position:relative;}
子元素{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}