使用下面的按钮将图像置于<section>中

Question

我有一个部分，我希望在页面中间显示一个相当大的图像。我的意思是图像的中间，在该部分的中间。

在询问之前，我在图像CSS中尝试了下面的代码片段。

display: block;
margin: 0 auto;

display: block;
margin: 0 auto;
vertical-align: middle

padding-top: 100px;

position: absolute;
top: 45%;
left: 45%

注意：添加＆＃34; Absolute＆＃34;的位置然后是左侧和顶部的值，图像是去上面的部分，而不是留在第二部分。

注意：向CSS添加填充会导致在该部分上方生成空白空白。

小提琴：https://jsfiddle.net/3L02tm2u/

附加说明：

  

截面宽度和高度均为100％

     

截面在彼此之下，因此当填充添加到第二部分时，会在此部分上方创建空白区域。

     

摘要：希望图像完全位于图像下方按钮的中间部分。

Answer 1

Flex似乎是实现这一目标的好方法：

.image {
  margin: auto 50% 1em;
}

button {
  margin: 0 1em auto;
}

section {
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0;
}

<section class="section1">
  <img class="image" src="https://ak.picdn.net/assets/cms/97e1dd3f8a3ecb81356fe754a1a113f31b6dbfd4-stock-photo-photo-of-a-common-kingfisher-alcedo-atthis-adult-male-perched-on-a-lichen-covered-branch-107647640.jpg" alt="Cat" height="50" width="50">

  <button class="buttons">
   1
   </button>

  <button class="buttons">
   2
   </button>

  <button class="buttons">
   3
   </button>
</section>

对于信息或旧浏览器，表格布局也可以提供帮助：

.image {
  display: block;
  margin: auto;
}

button {
  margin: 1em;
}

section {
  height: 100vh;
  width: 100vw;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

body {
  margin: 0;
}

<section class="section1">
  <img class="image" src="https://ak.picdn.net/assets/cms/97e1dd3f8a3ecb81356fe754a1a113f31b6dbfd4-stock-photo-photo-of-a-common-kingfisher-alcedo-atthis-adult-male-perched-on-a-lichen-covered-branch-107647640.jpg" alt="Cat" height="50" width="50">

  <button class="buttons">
   1
   </button>

  <button class="buttons">
   2
   </button>

  <button class="buttons">
   3
   </button>
</section>

Answer 2

相对于父级添加位置将有助于其中的绝对位置元素。

here是工作小提琴

`

.section1{
   border:1px solid red;
   height:200px;
   width:200px;
   position:relative;
   margin:0 auto;
}

.image {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
}
.buttons-wrapper{
   position:absolute;
   width:100%;
   text-align:center;
   bottom:0;
   right:0
}

Answer 3

我建议你使用保证金。示例，如果您可以为图像和div编写css类，如：

.divClass{
height: 40px; 
}

.imageClass{
width: 20px;
height: 20px;
margin-top:10px;
margin-bottom:10px //not necessary if you work with px
}

如果您想使用％，您可以编写2类，如：

.imgClass{
height: 80%;
margin-top:10%;
margin-bottm:10%;
}