position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}.content {
background-color: #6699ff;
width: 50%;
height: 50%;
position: absolute;
/*top: 25%;
left: 25%; 這兩行和下面四行效果一樣*/
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;值描述
absolute
生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 left 位置新增 20 畫素。
static
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit
規定應該從父元素繼承 position 屬性的值。
CSS垂直居中和水平居中
總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...
CSS 水平居中和垂直居中
1 水平居中 行內元素 text align center 2 水平居中 定寬塊狀元素 margin auto，滿足定寬和塊狀兩個條件的元素是可以通過設定 左右margin 值為 auto 來實現居中的。3 水平居中 不定寬塊狀元素 不定寬度的塊狀元素有三種方法居中 這三種方法目前使用的都很多 1 ...
CSS居中布局（水平居中和垂直居中）
一 水平居中的四種方法 父容器和子容器寬度均不固定 1 inline block text align 子容器 父容器 缺點 不相容ie6 7，子容器內部的內容也會居中 相容辦法 子容器 模擬inline block 2 table margin 子容器 display table使子容器寬度隨著內...