情況1 對多行文字的水平垂直居中（條件：父元素高度不為0）
解決方案為：
父元素設定
這裡值得注意的是：
子元素如果是個塊級元素內含文字，要小心內部文字只會繼承text-align屬性。原因是vertical-align不具備繼承性，text-align有繼承性。
綜上：該方法子元素，為塊級元素，僅僅生效vertical-align，即垂直居中。為
display:inline，display:inline-block會完全生效水平垂直居中
情況2 對單行文字的水平垂直居中（條件：已知父元素高度）
解決方案為:
對父元素設定
解釋:這種方法設定垂直居中的原理是，line-height這個屬性的存在。這個屬性——」行高「指的是兩行文字基線間的距離。即：英文本裡的4格線中第三格線是為基線。
通俗解釋：
line-height這個屬性就是設定文字元素的上下的高度的。理解上可以如同盒模型的上下margin一般，文字內容本身就像盒模型的內容。
綜上：如果文字本身的上下高度之和等於父元素高度，那麼文字內容能夠垂直居中也就好理解了。而之所以是只適合單行文字，也就是因為第二行文字行高也等於父元素高度，那麼兩行文字的行高加起來就超過了父元素高度了。
注意:行高會影響塊級元素
情況3 對文字/塊級元素都可以的水平垂直居中(條件：父元素高度不為0)
第一種解決方案(flex布局方法)：
對父元素設定
或者或者
也可以不對父元素設定align-items:center，酌情對子元素設定align-self: center;來實現垂直居中。具體參考flex布局
第二種解決方案：
用css3的transform+position解決
父元素設定
子元素設定
css各種水平垂直居中
css各種水平垂直居中，網上查了一下，總結以下幾種 line height垂直居中 缺點，僅限於單行文字 item 效果 padding垂直居中 缺點，內容不確定時，高度不好固定 item 效果 margin垂直居中 需要知道父層和子層高度，然後marginleft margintop 父層 2 子...
Div在設定了浮動的情況下水平居中
自己布局的時候發現在設定了div為浮動後再去新增margin auto屬性是無效的 eg1 首先簡單布局一下，在body裡面新增兩個div，乙個父div div box 乙個子div div1 div1設定浮動並且設定margin auto 如下 無標題文件title div box div1 st...
各種情況下的console
以一位良師益友 1.輸出到日誌 console.log x 2.顯示乙個物件所有的屬性和方法。console.dir obj 3.佔位符 只支援字元 s 整數 d或 i 浮點數 f 和物件 o 四種。如 console.log d年 d月 d日 2011,3,2 console.log 圓周率是 f...