html 不定宽元素居中,四种常用方法 设置 不定/定宽高元素 在窗口/父元素中 水平垂直居中方法...

一、定宽高元素在屏幕窗口水平垂直都居中，方法如下：

元素{

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;

}

相关：运用css3变形实现不定宽高元素在父元素或屏幕窗口水平垂直都居中的方法 http://www.sharedblog.cn/?post=41