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

个人博客 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