一. 屏幕窗口居中
1.已知大小的元素在屏幕窗口水平垂直都居中
解决方案:
元素{
width:数值+单位;
height:数值+单位;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2+"px";
margin-top:-height/2+"px";
}
2.未知大小(不定宽高)的元素在屏幕窗口水平垂直都居中
方案:
元素{
position:fixed;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
}
二. 子元素在父元素中居中
1.未知大小(不定宽高)的子元素在父元素中水平垂直都居中
方案1:
父元素{
position:relative;
}
子元素{
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
margin:auto;
}
方案2:
父元素{
display:table-cell;(设置为表格单元格形式)
text-align:center;(当需要将文本,图片等元素进行水平居中时用)
vertical-align:middle;
}
注:display:table-cell;将元素转换为表格单元格形式
注:如果子元素为块元素,将元素转换为inline-block类型,再使用方案二来实现居中的效果