CSS水平垂直居中问题总结

水平垂直居中问题

1.已知大小的元素在屏幕窗口水平垂直都居中

元素{
width:value;
height:value;
position:fixed;
left:50%;
top:50%;
margin-left:-width/2+“px”;
margin-top:-height/2+“px”;
}

2.未知大小的元素在屏幕窗口水平垂直都居中

元素{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}

3.已知大小的子元素在父元素中水平垂直都居中

父元素{
position:relative;
}
子元素{
width:value;
height:value;
position:absolute;
left:50%;
top:50%;
margin-left:-width/2+“px”;
margin-top:-height/2+“px”;
}

4.未知大小的子元素在父元素中水平垂直都居中

父元素{
position:relative;
}
子元素{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}

扩展一：

在父元素盒子中添加一个span，并设置如下样式：

父元素{text-align:center;}

子元素{vertical-align:middle;}

span{display:inline-block; width:0; height:100%; vertical-align:middle;}

扩展二：

父元素{
display:table-cell;
text-align:center;
vertical-align:middle;
}

★ 使用flex布局的方式实现已知或未知大小的元素在屏幕窗口水平垂直都居中

html,body{height:100%;}

body{display:flex;justify-content:center;align-items:center;}

★ 使用flex布局的方式实现已知或未知大小的子元素在父元素中水平垂直都居中

父元素{display:flex;justify-content:center;align-items:center;}

★ 使用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%);