CSS的垂直置中,左右置中

CSS的垂直置中方式有很多,用這麼多方法,還是覺得position的方式最好用,至於左右置中的話,一般人最熟悉的就是 margin:0 auto;,垂直則有以下幾種方式(有些稍作調整,也可適用於左右置中)。

1. 方法一

HTML

<div class="center-block">置中</div>

CSS

.center-block {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width:400px;
  height:200px;
  background-color: #cccccc;
  margin:auto;
}

2. 方法二

HTML

<div class="center-block">置中</div>

CSS

.center-block {
  position:absolute;
  width: 400px;
  height:400px;
  top:50%;
  left: 50%;
  margin-top:-200px; //本身height的50%
  margin-left: -200px; //本身width的50%
  background-color: #cccccc; 
}

3. 方法三

HTML

<div id="float-center"></div>
<div class="center-block">置中</div>

CSS

html, body {
    margin:0; padding:0; height:100%;
}
.float-center {
  float:left;
  height:50%;
  margin-bottom:-200px;
  width:1px; /* only for IE7 */
}
.center-block {
  clear:both;
  height:400px;
  position:relative;
  background-color: #cccccc;
}

Comments

comments powered by Disqus