元素居中问题

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%);