在前端開發過程中，盒子居中是常常用到的。其中 ，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設定元素的margin: 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來討論一下實現垂直居中的方法。
首先，定義乙個需要垂直居中的div元素，他的寬度和高度均為300px，背景色為橙色。**如下：
複製**
index
複製**
效果如下：
我們需要使得這個橙色的div居中，到底該怎麼辦呢？首先我們實現水平居中，上面已經提到過了，可以通過設定margin: 0 auto實現水平居中，**如下：
複製**
index
複製**
效果如下：
很好，已經實現水平居中了！接下來該打大boss了——實現垂直居中。不過，在這之前，我們先要設定div元素的祖先元素html和body的高度為100%（因為他們預設是為0的），並且清除預設樣式，即把margin和padding設定為0（如果不清除預設樣式的話，瀏覽器就會出現滾動條，聰明的親，自己想想問什麼）。
index
複製**
接下來，需要做的事情就是要讓div往下移動了。我們都知道top屬性可以使得元素向下偏移的。但是，由於預設情況下，由於position的值為static（靜止的、不可以移動的），元素在文件流裡是從上往下、從左到右緊密的布局的，我們不可以直接通過top、left等屬性改變它的偏移。所以，想要移動元素的位置，就要把position設定為不是static的其他值，如relative,absolute,fixed等。然後，就可以通過top、bottom、right、left等屬性使它在文件中發生位置偏移（注意，relative是不會使元素脫離文件流的，absolute和fixed則會！也就是說，relative會佔據著移動之前的位置，但是absolute和fixed就不會）。設定了position: relative後的**如下:
複製**
index
複製**
我們重新整理一下頁面，發現跟之前是沒有任何變化的，因為，我們僅僅是使設定了元素的position=relative而已，但是還沒開始移動他的垂直偏移。好，下面我們就讓它偏移吧！垂直偏移需要用到top屬性，它的值可以是具體的畫素，也可以是百分數。因為我們現在不知道父元素（即body）的具體高度，所以，是不可以通過具體畫素來偏移的，而應該用百分數。既然是要讓它居中嘛！好，那麼我們就讓它的值為50%不就行了嗎？問題真的那麼簡單，我們來試一下，就設定50%試一下：index
複製** 運興etf css實現垂直居中的常用方法運興etf css實現垂直居中的常用方法運興etf css實現垂直居中的常用方法
實現垂直居中
html center me html center me 對於固定寬高的元素來說我們可以使用如下方法實現居中 wrap container 但是我們經常遇到是由內容撐起來得沒有確定寬高的塊級元素。這時怎麼辦，答案來自於transform。設定transform translate x,y 如下cs...
實現水平居中垂直居中
熟悉水平居中和垂直居中的方法,不為別的,就為用的時候能夠信手拈來.下面直接步入正題.原文 16種方法實現水平居中垂直居中 1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 f...
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...