垂直居中

寫在前面

垂直居中是個常常遇到的問題，日常都是百度黨，而後今天又遇到一個，須要垂直水平居中，並且未知被居中的元素高寬（通用性/），而後兼容性仍是經久不衰的ie8。。因而就複習總結，就有了這篇。。

easy水準

彈性佈局 display:flex;----搞定一切 IE10+

div{
    display:flex;
    justify-content:center;
    align-items:center;
}

還有一種是基於絕對定位佈局的

div{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);  
    -ms-transform: translate(-50%,-50%);  
    transform: translate(-50%,-50%);  
}

二者均可以直接實現水平垂直居中，並且不用父級定高定寬

而後還有一個公共點 IE8不支持

/(ㄒoㄒ)/~~

另外某種意義上完美的方法

負外邊距

div{
    width: 300px;  
    height: 200px;  
    padding: 20px;  
    position: absolute;  
    top: 50%; left: 50%;  
    margin-left: -170px; /* (width + padding)/2 */  
    margin-top: -120px; /* (height + padding)/2 */  
}

只不過要知道被居中的定寬定高。。。。

最終方法

在segmentfault上找到一個問題，與個人需求一致

https://segmentfault.com/q/1010000002959795

寬度不定 高度不定div 垂直居中 要求兼容ie8 只用css

而後題主給的解決辦法是

.con-ghost {
    text-align: center;
    white-space: normal;
}

.con-ghost:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.con-ghost {
    .box {
        display: inline-block;
        vertical-align: middle;
    }
}

有效

vertical-align: middle;

垂直對齊圖片

text-align: center;

文本對齊方式;這個居中只對文本有效

原理

在div中添加一個空的內容段顯示味行內，當成文本，由於高度是100%因此撐滿上級div，以後vertical-align: middle;即被居中的元素位於這內容段的中間（垂直居中）水平，水平居中是由於text-align: center;總體被當成文本的給上級處理？

 

 

 

而後找到了張鑫旭大神的這篇

http://www.zhangxinxu.com/wordpress/2010/09/after%e4%bc%aa%e7%b1%bbcontent%e5%86%85%e5%ae%b9%e7%94%9f%e6%88%90%e5%b8%b8%e8%a7%81%e5%ba%94%e7%94%a8%e4%b8%be%e4%be%8b/
 

2018/05/22

瞧見張鑫旭大神的最佳實踐！！！！
http://demo.cssworld.cn/5/3-10.php

更多方法

http://blog.csdn.net/freshlover/article/details/11579669

 

2018/10/22

https://www.zhangxinxu.com/study/201605/width-fill-available.htmlv

css3 利用

width: fill-available;

實現垂直居中