轉自： http://blog.onlygrape.com/position/186

?

定義
position 屬性把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

span>position版本：CSS2　 兼容性：IE4+ NS4+　繼承性：無br>

語法：
position : static | absolute | fixed | relative

?

參數：
static：默認。它始終會處于頁面流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。

relative：位置被設置為 relative 的元素，可將其移至相對于其正常位置的地方，因此 “left:20″ 會將元素移至元素正常位置左邊 20 個像素的位置。

absolute：位置設置為 absolute 的元素，可定位于相對于包含它的元素的指定坐標。此元素的位置可通過 “left”、”top”、”right” 以及 “bottom” 屬性來規定。

fixed：位置被設置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。此元素的位置可通過 “left”、”top”、”right” 以及”bottom” 屬性來規定。不論窗口滾動與否，元素都會留在那個位置。工作于 IE7（strict 模式）。

HTML定位規則
absolute : 　將對象從文檔流中拖出，使用left， right， top， bottom 等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和 邊框
relative : 　對象不可層疊，但將依據left，right， top， bottom等屬性在正常文檔流中偏移位置
fixed : 　IE5.5及NS6尚不支持此屬性

圖片垂直居中代碼：

<!DOCTYPE?html?PUBLIC?“-//W3C//DTD?XHTML?1.0?Strict//EN”?“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<style?type=”text/css”>
<!–
*?{margin:0;padding:0}
div?{
?width:500px;
?height:500px;
?line-height:500px;
?border:1px?solid?#ccc;
?overflow:hidden;
?position:relative;
?text-align:center;
?}
div?p?{
?position:static;
?+position:absolute;
?top:50%;
?vertical-align:middle
?}
img?{
?position:static;
?+position:relative;
?top:-50%;left:-50%;
?width:276px;
?height:110px;
?vertical-align:middle
?}
–>
</style>
<div><p><img?src=”http://www.google.com/intl/en/images/logo.gif”?/></p></div>

?

轉載于:https://www.cnblogs.com/iswszheng/archive/2009/07/29/1525033.html

總結

以上是生活随笔為你收集整理的position属性及实现图片垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。