一、題目要求滿足：
**實現：
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width"
>
>
js bintitle
>
head
>
>
class
="wrap"
>
class
="inner"
>
adiv
>
div>
body
>
html
>
css有兩種方式實現上下居中，一種是使用flex布局的align-items屬性，另一種是使用transform(注釋部分)；
實現高度是寬度的一半可以使用calc(50vw - 10px),vw是一種單位，將可視視窗切分成100份，每乙份是1vw。實現高度是寬度的一半，div.inner寬度是100vw-20px, （20px是左右的margin），所以高度是其除以二（50vw-10px）.
*html,body
div.wrap
div.inner
二、簡單版本，實現乙個div左右上下居中
左右使用：margin:0 auto;
上下使用定位：position:relative + top + margin-top(通過定位加top實現div上邊框位於頁面50%的位置，此時div是偏下的，我們期望div的中間位於頁面的50%位置，所以再通過margin-top將div上移自身高度的50%即可達到目的。)
**：
>
>
>
div>
body
>
html
>
//這一步很關鍵，因為預設寬高不是100%
html, body
div
實現div的上下左右都居中
把 綠色那個div 上下頁居中 讓層垂直居中於瀏覽器視窗 其實解決的思路是這樣的 首們需要position absolute 絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。如 乙個層寬度是400，高度是300。使用絕對定位距離上部與左部都設定成50 而m...
div中的文字上下左右居中
如何將 層中的文字上下左右居中對齊?如何將 層中的文字上下左右居中對齊?解決方案 其實用兩個值就可以了 text align center 這是讓文字左右居中 line height 100px 這是讓文字垂直居中 vertical align middle 這個屬性不能讓文字垂直居中，該屬性定義行...
用CSS讓DIV上下左右居中的方法
例如 乙個父div w 100 h 400px 中有乙個子div w 100px 100px 讓其上下左右居中。利用 單元格的居中屬性。注 當父div的行高等於自身高度時，內部的行內元素會上下居中顯示。行內塊沒有固定高度時也會上下居中顯示。通過文字居中屬性 text align center,可以使...