網頁佈局垂直水平居中方法總結

web前端開發常常用到的就是使元素在容器裏面進行水平垂直居中。相對於垂直居中來講，水平居中或許比較容易。若是是塊級元素直接設置其margin:auto便可完成水平居中；若是是內聯元素，能夠經過display:inline-block(display:block)變成塊級元素再進行設置margin值或者經過text-align:center便可使水平居中。如果垂直居中，若是是內聯元素，能夠設置vertical-align:middle能夠使其垂直居中(前提是父容器裏面只有一個子元素才生效)。因此下面在平時總結了如下幾種垂直居中的方法。

1. 最經常使用的方法，也是平常web前端開發中用得最多的經過設置line-height屬性與當前元素的高度值一致，可是缺點就是目前的元素的高度必須設置爲固定值，沒有了更多的靈活性，先舉個例子demo(下面舉例的html結構相似):

// html結構
<div class="parent">
    demo 
</div>
// css樣式使文本元素垂直水平居中
div.parent{
  width:100px;
  height:100px;
  vertical-align:middle;
  line-height:100px;
}
複製代碼

2. 經過絕對定位元素來使元素進行垂直水平居中，缺點就是子元素必須設置固定的寬度高度值且會以最近的一個設置posiiton爲relative的父元素進行定位，若是沒有這樣的父元素，就以body文檔爲定位:

// html結構
<div class="parent">
  <div class="child">demo</div>
</div>
// css樣式
div.parent{
  position:relative;
  width:200px;
  height:200px;
}
div.child{
  position:absolute;
  width:100px;
  height:100px;
  margin:auto;
  left:0;
  top:0;
  bottom:0;
  right:0;
}
複製代碼

3. 經過table-cell方法進行定位居中，父元素設置寬高度便可：

// html結構
<div class="parent">
  <div class="child">demo</div>
</div>
// css樣式
div.parent{
  display:table;
}
div.child{
  display:table-cell;
  text-aglin:center;
  vertical-align:middle;  
}
複製代碼

4. 經過CSS3的彈性盒子模型flex進行佈局定位:

// html結構
<div class="parent">
  <div class="child">demo</div>
</div>
// css樣式
div.parent{
  width:100%;
  height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
}
// 或者直接設置子元素
div.parent{
  width:100%;
  height:200px;
  display:flex;
  justify-content:center;
}
div.child{
  align-self:center;
}
複製代碼

5. 經過flex的舊版本進行水平垂直居中對齊(其中box-orient相似於新版的flex-direction)：

// html結構
<div class="parent">
  <div class="child">demo</div>
</div>
// css樣式
div.parent{
  width:100%;
  height:200px;
  display:box;
  box-align:center;
  box-pack:center;
}
複製代碼

6. 經過絕對定位absolute加margin負值進行居中對齊:

// html結構
<div class="parent">
  <div class="child">demo</div>
</div>
// css樣式
div.parent{
  width:100px;
  height:100px;
  position:relative;
}
div.child{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
}
複製代碼

7. 經過CSS3的transform屬性的位移值translate來進行水平垂直居中

// html結構
<div class="parent">
  <div class="child">demo</div>
</div>
// css樣式
div.parent{
  width:100px;
  height:100px;
  position:relative;
}
div.child{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  width:50px;
  height:50px;
  transform:translate(-50%,-50%);
}
複製代碼

8. 利用上層元素的浮動來進行垂直居中:

// html結構
<div class="content"></div>
<div class="next">demo</div>
// css樣式
div.content{
  height:50%;
  float:left；
  margin-bottom:-120px;
}
div.next{
  clear:both;
  height:240px;
  position:relative;
}
複製代碼