鍍金池/ 問答/網(wǎng)絡安全  HTML/ css div內兩個元素左右布局，如何讓他們都垂直居中？

css div內兩個元素左右布局，如何讓他們都垂直居中？

居中問題

div內兩個元素，一個分布左邊、一個分布右邊，如何讓兩個元素在div內垂直居中？？？
（注：：：flex最好考慮一下兼容性問題）

圖片描述

回答
編輯回答
氕氘氚

1.方案一

display:inline;
line-height=height

2.方案二

position:absolute;
top:50%;
translate:transform(0,-50%)
2017年7月19日 10:15
編輯回答
舊螢火

flex布局：

.parent: {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
2018年8月6日 16:37
編輯回答
離魂曲

一、父元素flex方案：

display:-webkit-box;
-webkit-box-align:center;
display:box;
box-align:center;
display:-webkit-flex;
display:flex;
align-items:center;

二、父元素display:table方案...
居中元素在display:table-cell的元素中，并設置vertical-align:center

三、css3方案...
居中元素絕對定位

position:absulote;
top:50%;
transform:translateY(-50%);
2018年6月28日 21:56
編輯回答
冷眸

就用 flex-box 就好，這都什么年代了還要考慮兼容性問題，你去哪兒找出來那么多用老系統(tǒng)的人。

2018年6月12日 12:17
編輯回答
念初

給個參考，水平垂直居中

2018年2月25日 13:11