css div内两个元素左右布局,如何让他们都垂直居中?

居中问题

div内两个元素,一个分布左边、一个分布右边,如何让两个元素在div内垂直居中???
(注:::flex最好考虑一下兼容性问题)

图片描述

阅读 21.5k
5 个回答

1.方案一

display:inline;
line-height=height

2.方案二

position:absolute;
top:50%;
translate:transform(0,-50%)

flex布局:

.parent: {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

一、父元素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%);

就用 flex-box 就好,这都什么年代了还要考虑兼容性问题,你去哪儿找出来那么多用老系统的人。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题