1.元素居中问题
1.1块元素居中
横向:margin:0 auto;
纵向:margin-top: (父级高度-子级高度)/2
1.2内联元素居中
横向:text-align:center
纵向:line-height:自身高度(文字);
纵向:vertical-align: middle 行内块元素 需要配合display:table-cell(父级)
1.3定位居中
top: 50% left: 50% margin: 上和左各负本身元素的高和宽的一半;
1.4 flex布局居中
父级:
display: flex;justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。使用 align-content 属性对齐交叉轴上的各项(垂直)。
横向:
justify-content属性(ie11以上):
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。(横向)
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
纵向:
align-content属性(ie11以上):
stretch 默认值。元素被拉伸以适应容器。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。(纵向)
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 默认值
align-items属性(ie11以上):
stretch 默认值。元素被拉伸以适应容器。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。(纵向)
initial 默认值。
1.5 百分比居中
position & transform: translate(-50%, -50%) 实现块元素百分比下居中
父级
position: relative;
子集居中元素
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);