在一个部分中居中图像[重复]答案

【问题标题】：centering a image in a section [duplicate]在一个部分中居中图像[重复]
【发布时间】：2016-05-28 12:20:39
【问题描述】：

我希望这张图片正好在页面的中心，在一个部分中，但它不起作用，顺便说一句，我正在使用玉和 sass。玉：

section.believe(data-section-name='texture', <='', body='')
      img.minion(src="/images/IMG_6219.jpg")

萨斯：

  .minion
    top: 50%
    left: 50%
    padding: 100px
    margin: 0 auto
    height: 10%
    transform: rotate(90deg)

【问题讨论】：

我建议您使用 div 而不是 section 标签。 stackoverflow.com/questions/2134333/…
您可以将display: inline-block 给孩子，将text-align: center 给父母。否则，您应该确保您的部分有 display: block 并且它占据了页面的整个宽度。
我使用 section 标签的原因是使用 scrollify 的滚动捕捉 (projects.lukehaas.me/scrollify) 它只是让组织更容易。
- Jordan Mulder 我试过了，但没有任何改变。 .believe text-align: center display: block .minion display: inline-block top: 50% left: 50% display: block padding: 100px height: 10% transform: rotate(90deg)
我可能会误解，但也许可以试试：.believe {display:block;} .minion {display:block;margin:0 auto;} 编辑：对不起，我在试图弄清楚如何添加代码 sn-p 样式时按了 Enter :)

【解决方案1】：

试试这个

.minion
    position: absolute
    top: calc(50% - 400px)
    left: calc(50% - 400px)
    margin: 0

400px = 图片宽度/高度的一半

【讨论】：