Question

如何让div浮动整页的左侧并始终位于垂直的中间左侧？

我的HTML代码很简单：

<body>
  <div class="num_book">  
    <img src="imgs\PhoneDir.png" alt="phone dir" height="142.2" width="45.6">
  </div>
</body>

我的css到目前为止：

.num_book {
   float: left; 
}

我已经尝试过我的css：位置，边距，填充，显示，垂直对齐，没有运气，任何的想法？

Answer 1

body{
  width: 100vw;
  height: 100vh;
  position: relative;
}

.box{
  width: 200px;
  height: 200px;
  background: red;
  position: fixed;
  bottom: 0px;
  top: 0px;
  left: 0px;
  margin: auto;
}

<body>
  <div class="box"></div>

<body>

Answer 2

我会这样做，使用flexbox：

＆＃13;

.wrapper {
    /* vertical bar on left side */
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;	

    /* align items inside vertically centered */
    align-items: center;
    display: flex;
}
.centered {
    background-color: red;
}

＆＃13;

<div class="wrapper">
    <div class="centered">Hello!</div>
</div>

＆＃13;

.wrapper左侧是固定的see position）垂直条，内侧的.centered垂直于中心对齐（请参阅display: flex和{{3 }}）。

Answer 3

2017年，use a flexbox。

.container {
    display: -ms-flexbox;
    display: flex;

    -ms-flex-align: center;
    align-items: center;
}

MDN has a good example of this too.

Answer 4

一种方法是将顶部设置为50％，位置绝对。

<style>
    .num_book {
       float: left; 
       top:50%;
       position:absolute;
    }
    </style>
    <body>
      <div class="num_book">  
        <img src="imgs\PhoneDir.png" alt="phone dir" height="64" width="64">
      </div>
    </body>

垂直div浮动在页面的左侧中间

4 个答案: