doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
/>
<
title
>
title
>
<
style
type
="text/css"
>
style
>
head
>
<
body
>
<
div
class
="father"
>
<
div
class
="son"
>son
div>
div>
body
>
html
>
方法一（使用絕對布局）： 這種方式的弊端是：必須要知道這個容器的長寬，因為在子元素中的 margin-top:-100px; margin-left:-100px; 這兩個樣式分別是子元素長、寬的一半。
.father .son
方法二：仍然是絕對布局，讓left和top都是50%，這在水平方向上讓div的最左與螢幕的最左相距50%，垂直方向上一樣，所以再用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果了，效果圖和上方相同。//這種方式很好的避免了方式一的弊端，不需要知道自己的長寬，一樣可以定位到中間。
.father.son
方法三（使用彈性布局flex）：//這種方式比較通用：這樣給父元素設定了三個樣式display:flex;(彈性布局) justify-content:center;(內容水平居中) align-items:center; (內容垂直居中) 就可以達到水平、垂直居中的效果。
.father .son
方法四（使用絕對布局）：//使用這種方式的要領是：子絕父相，且子元素要設定以下的樣式position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; 就可以達到居中效果。
.father .son
如何居中div？
1.水平居中 利用margin屬性 給div設定寬高，利用margin 0 auto 來實現元素的水平居中。上下為0，左右自適應。class box class contain 子元素div div contain 2.水平居中 利用 text align center 設定子元素display i...
div居中以及div中的元素居中
div居中以及div中的元素居中 div水平和垂直居中，text align和vertical align不起作用，因為標籤div沒有這兩個屬性，所以再css中設定這兩個值不能居中的效果。div水平居中 設定margin的左右邊距為自動。1 div 2 2.div中的元素居中 2.1 div中的文字...
Div居中，Div裡的內容居中
1.div居中 主要的樣式定義如下 body center說明 首先在父級元素定義text align center 這個的意思就是在父級元素內的內容居中 對於ie這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上 margin right auto mar...