四种常用方法 设置 不定/定宽高元素 在窗口/父元素中 水平垂直居中方法
个人博客 http://www.sharedblog.cn/?post=97
一、定宽高元素在屏幕窗口水平垂直都居中,方法如下:
元素{
position: fixed;
left: 50%;
top: 50%;
/*负值+宽的一半+单位*/
margin-left: -width/2+px;
/*负值+高的一半+单位*/
margin-top: -height/2+px;
}
二、不定宽高元素在屏幕窗口水平垂直都居中,方法如下:
元素{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
三、不定宽高元素在父元素中水平垂直都居中,方法如下:
方案一:
父元素{
position: relative;
}
子元素{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法二:
父元素{
display: table-cell;
text-align: center;
vertical-align: middle;
}
/*注:display:table-cell;是将元素转化为表格单元格形式*/
四、定宽高元素在父元素中水平垂直都居中,方法如下:
父元素{
position: relative;
}
子元素{
position: absolute;
left: 50%;
top: 50%;
margin-left: -width/2+px;
margin-top: -height/2+px;
}
个人博客 http://www.sharedblog.cn/?post=97
相关:运用css3变形实现不定宽高元素在父元素或屏幕窗口水平垂直都居中的方法 http://www.sharedblog.cn/?post=41