Question

我试图在我的页面上垂直居中我试过几个脚本＆amp;风格，但没有一个工作

我的页面是： TEST.esc.bugs3.com

我试图将＃34; Arrow＆＃34;图片左侧＆amp;右侧是主图片的中心今天我得到的是照片总是在＆＃34; TOP＆＃34; DIV＆amp;我想把它放在中心

注意：我不想使用固定尺寸作为PX，我希望能达到50％像主图片是100％的高度，箭头将显示在它的50％

Layout - how i wish it will look like

感谢您的帮助：）

编辑：谢谢你的回答但我需要侧面div（侧边框）垂直居中到主div（中间框）

主要图片尺寸不固定（每种媒体都有不同的尺寸 - 所以我不能使用PX作为位置

Answer 1

将CSS3 Flexbox用于现代浏览器：此处为Browser support。

.center-both{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 350px; 
  background: LightSeaGreen; 
}

Fiddle

阅读本文，了解有关flexbox的更多信息：http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html

如果您想支持IE7 / IE8等旧浏览器，请使用display: table-cell;属性将内容垂直放置在中心位置。

Answer 2

为您的图片使用此代码：

.pic{
    position: absolute;
    top: 50%;
    margin-top: -(HEIGHT/2)
}

哪个高度是你的图片在像素中的高度。

更新1 您的容器应具有特定的高度并具有CSS属性：Position: (Relative|Absolute|Fixed)

Answer 3

更改Sidepanel类的css，如下所示

    .SidePanel {
      width: 5%;
      height: auto;
      float: left;
      background-color: green;
      display: flex;
      justify-content: center;
      align-items: center;
   }

HTML5 + CSS3布局 - 图片

3 个答案: