CSS置中完全解決方案，css完全解決方案

CSS置中完全解決方案，css完全解決方案

上次面試面試官問到了，問了個定寬局中和不定寬局中，下來我把所有有關CSS置中都總結了一下

原文摘自我的前端部落格，歡迎大家來訪問

http://www.hacke2.cn水平置中行內元素

把行內元素嵌套在一個DIV中，並且在DIV中設定以下樣式

a{text-align: center;}

區塊層級元素

對於定寬的區塊層級元素，我們要設定起margin-top,margin-right 為auto

.center{margin: 0 auto;}

多個區塊層級元素(inline-block)

多個區塊層級元素，我們將其display設定為inline-block；然後將父級元素設定一下屬性

div{text-align: center;}

多個區塊層級元素(flex)

設定需要水平置中的塊狀元素的父元素display為flex ，並且justify-content屬性為center即可

body{  display: flex;  justify-content: center;}

垂直置中單行 行內元素

將行內元素的height和line-height設定為一致即可

a{  height: 200px;  line-height:200px;  }

多行 行內元素

如果行內元素文字過多產生多行，則在父級元素設定display: table-cell;vertical-align:middle;

.container{width: 300px;height: 300px;display: table-cell;vertical-align:middle;}

已知高度的區塊層級元素

將區塊層級元素設定絕對位置，top為50%，margin-top:-height/2

div{  height: 100px;  position: absolute;  top: 50%;  margin-top: -50px;  padding:0; }

未知高度的區塊層級元素

使用CSS translate,將區塊層級元素設定絕對位置，top為50%，transform: translateY(-50%);

div{  position: absolute;  top: 50%;  transform: translateY(-50%);  padding:0; }

水平垂直置中已知高度、寬度的元素

將區塊層級元素設定絕對位置，top為50%，left:50%;margin-top:-height/2;margin-left:-width/2

div{width: 150px;height: 150px;position: absolute;top: 50%;left: 50%;margin-top: -75px;margin-left: -75px;}

已知高度、寬度的元素(flex)

給父級使用flex布局

div{display: flex;justify-content:center;align-items: center;}

未知高度、寬度的元素

使用CSS translate

div{    position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}

DIV+CSS怎讓文字垂直置中？

在說到這個問題的時候，也許有人會問CSS中不是有vertical-align屬性來設定垂直置中的嗎？即使是某些瀏覽器不支援我只需做少許的CSS Hack技術就可以啊！所以在這裡我還要囉嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。

CSS網頁布局DIV水平置中的各種方法

一、單行垂直置中

如果一個容器中只有一行文字，對它實現置中相對比較簡單，我們只需要設定它的實際高度height和所在行的高度line-height相等即可。如：

imoker.cn（愛摩客）提供的程式碼片段：

div {
height:25px;
line-height:25px;
overflow:hidden;
}
這段代碼很簡單，後面使用overflow:hidden的設定是為了防止內容超出容器或者產生自動換行，這樣就達不到垂直置中效果了。

imoker.cn（愛摩客）提供的程式碼片段：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title> 單行文字實現垂直置中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<d......餘下全文>>
 
css文本及映像div等置中方法,看問題補充

給你3個方法解決：
1、給img加入vertical-align:middle
<div id="img">
<img src="xx.gif" style="vertical-align:middle" />
</div>

2、插入table中，td預設情況下是內容垂直置中的
<div id="img">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="xx.gif" /></td>
</tr>
</table>
</div>

3、直接把img設為背景圖片顯示，背景顯示位置Y軸置中
background:url(images/xx.gif) 0 center no-repeat;