CSS中有關水平居中和垂直居中的解決辦法

ccs中讓div等塊級元素在父級元素中居中的方法：

（1）div

該方法只能實現水平的居中，無法實現元素的垂直居中

（2）當div元素的寬高是固定的，然後設定位置為絕對位置absolute，左邊框和上邊框的距離設定為50%，這個50%就是指具有定位為absolute或者是relative的祖元素的寬度和高度的50%，最後將該div分別左移和上移，左移和上移的大小就是該div寬度和高度的一半。：

. parent

這種方法的優點就是它可以在任何瀏覽器上執行，並且**很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸縮的。

b、元素的高度未知時：

.parent

.child

c、利用display：flex

.parent

（3）jquery實現水平和垂直居中

jquery實現水平和垂直居中的原理就是通過jquery設定div的css，獲取div的左、上的邊距偏移量，邊距偏移量的演算法就是用頁面視窗的寬度減去該div得寬度，得到的值再除以2即左偏移量，右偏移量演算法相同。注意div的css設定要在resize()方法中完成，就是每次改變視窗大小時，都要執行設定div的css，**如下：

$(window).resize(function());

此方法的好處就是不需要知道div的具體寬度和高度大小，直接用jquery就可以實現水平和垂直居中，而且相容各瀏覽器，這個方法在很多的彈出層效果中應用。

css中讓文字等行內（inline-*）元素居中的方法：

一、水平居中

（1）text-align:center（通常用於inline-block、inline-table、inline-flex/inline等）

（2）margin：0 auto通常用於塊級元素，乙個或者一列塊級元素均可以只是對元素本身進行居中不居中文字。

（3）當有行多列元素需要進行居中顯示時需要借助dispaly屬性來實現。

二、垂直居中

css中的確是有vertical-align屬性，但是它只對(x)html元素中擁有valign特性的元素才生效，例如**元素中的、、等，而像、這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用

（1）乙個容器中只有一行文字，利用line-height,設定其值和height一樣，當有多行文字時會出現不同行文字之間也有行距，所以其只適合於單行文字的情況。

text-align:center;

height:20px;

line-height:20px;

overflow:hidden;//使用overflow:hidden的設定是為了防止內容超出容器或者產生自動換行，這樣就達不到垂直居中效果了。

（2）多行未知高度文字的垂直居中

a、當容器中有行文字內容時，使用line-height達不到想要的效果時可以考慮使用padding的填充方式。使上下，左右分別填充相同的量即可實現居中

div

這種方法的優點就是它可以在任何瀏覽器上執行，並且**很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸縮的。

（3）多行文字固定高度的居中

在本文的一開始，我們已經說過css中的vertical-align屬性只會對擁有valign特性的(x)html標籤起作用，但是在css 中還有乙個display屬性能夠模擬，所以我們可以使用這個屬性來讓模擬就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設定在父元素

上，後者必須設定在子元素上，因此我們要為需要定位的文字再增加乙個元素：

div#wrap

div#content

這個方法應該是很理想了，但是不幸的是internet explorer 6 並不能正確地理解display:table和display:table-cell，因此這種方法在internet

explorer 6及以下的版本中是無效的。

CSS中有關水平居中和垂直居中的解決辦法

CSS 垂直居中和水平居中

CSS垂直居中和水平居中

CSS 水平居中和垂直居中

CSS中有關水平居中和垂直居中的解決辦法

CSS 垂直居中和水平居中

CSS垂直居中和水平居中

CSS 水平居中和垂直居中

相關推薦