1. 使用line-height將單行文字垂直居中
設定line-height等於height，可使單行文字垂直居中
例：
div
加入line-height屬性後
div
2.用定位的方法實現垂直居中
使用position: absolute;和position: relative;利用定位的「子絕父相」來使子元素相對于父元素垂直居中。原理是使子元素先向下移動父元素的50%，再向上移動自己大小的50%。
例：
.father
.son
加入position: absolute;和position: relative;屬性後
.father
.son
3.利用flex布局實現垂直居中
原理是通過設定flex的主軸方向和在主軸方向還是副軸方向上居中的方法來實現（flex預設的主軸方向是row）
方法1：給父元素設定display: flex;和align-items: center; 主軸預設橫向，副軸豎向，使子元素在副軸方向上居中。
.father
.son
.father
.son
.father
.son
4.利用絕對定位+margin: auto;
「子絕父相」後，給子元素設定margin: auto;bottom: 0;top: 0;即可實現垂直居中。
.father
.son
.father
.son
5.利用vertical-align: middle;使文字相對於垂直居中
通過給設定vertical-align: middle;屬性：
.father
img
這種方法涉及到文字的底線，基線，中線和頂線的知識，不懂的小夥伴可以先去了解一下。
6.通過新增偽元素的方法使內容達到垂直居中
此方法的原理和第五條的原理類似，就是通過設定乙個偽元素達到方法5中的作用，但是利用偽元素不會佔取空間。
總結以上就是本次介紹的6種常用的使內容垂直的居中的方法，大家可以根據實際遇到的情況靈活使用。
CSS 元素垂直居中的 6種方法
利用css進行元素的水平居中，比較簡單，行級元素設定其父元素的text align center，塊級元素設定其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法，每一種適用於不同的情況，在實際的使用過程中選擇某一種方法即可。試用 單行文字...
css的實現元素垂直居中
經常在寫 的時候碰到垂直居中的問題，我一般用的多的是絕對定位加負的margin或者display table來實現居中。但是實際專案中，常常有一些特殊的情況，讓上述方法使用起來並不是那麼的靠譜。因此，更多行之有效的方法就顯得尤為重要了。說明部分 正文開始 子div居中 這個方法使用絕對定位的div，...
CSS實現元素垂直居中
對元素的垂直居中針對於單行元素和多行元素將分情況討論。父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html結構 hello world css樣式 對於父元素高度不確定的文字 等的塊級元素的豎直居中可以設定相同的上下內邊距 ...