Question

我最近开始从this set of books学习HTML，CSS，JavaScript和jQuery。

我已经尝试了每一个明显的答案，我可以在Stack Overflow上挖掘来做通常非常简单的任务，将div放在页面上。我的特定页面有一个叠加层，我怀疑这是我的问题的一部分。我正在努力使CodePen适应我的项目。在此CodePen中，只有一个元素H1标签需要在页面上居中并且工作正常。

在我的页面上，我正在用div替换h1标签。我已经添加了一个指向jsFiddle的链接，其中包含评论：我尝试过做的事情。我知道我错过了一些非常简单的东西，但我无法弄清楚它是什么。

感谢您阅读，我欢迎您对此前端菜鸟的建议。

以下是我有问题的代码：

<!DOCTYPE html>
<body>
    <header>
      <div class="hero" id="Portfolio">
        <div class="overlay"></div>
        <div class="page-subject">
                <!-- Rather than a vanilla h1 tag following the div.overlay, I wrapped the h1 tag in a div called div.page-subject. I can't get this div to center -->
            <h1>Portfolio</h1>
            <div class="container space-around">
                <div><a href="#" class="hvr-pop"><img src="../images/icons/apple-app-store-128.png" alt="iOS Applications"></a></div>
                <div><a href="#" class="hvr-pop"><img src="../images/icons/amazon-echo-128.png" alt="Amazon Alexa Skills"></a></div>
            </div>
        </div>
    </div>
</header>

html, body {
  height:100%;
  padding:0;
  margin:0;
  font-family: Raleway,sans-serif;
  color:#FFF;
}
header {
  height: calc(100% - 65px);
  background:#333;

  -webkit-perspective: 1500px;
  perspective: 1500px;
  perspective-origin: center bottom;
}

h1 {
  margin:0;
  vertical-align: middle;
  text-align:center;
  font-size:80px;
  font-weight:600;
  text-transform:none;
  text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}


.hero#Portfolio {
  position:relative;
  background:#333 url(https://wallpaperscraft.com/image/surface_gray_dark_light_shadow_18440_2560x1600.jpg) no-repeat center center;
  background-size:cover;
  height: 100%;
  width:100%;

  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  display:table;
}
.hero .overlay {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity:0;
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
div.page-subject {
    vertical-align: middle;
}

.container {
  display: flex;
}
.container.space-around {
    z-index: 10;
  justify-content: space-around;
  padding-bottom: 10px;
}

a {
    position: relative;
    z-index: 1;
}

a.hvr-pop img  {
    background: white;
    border-radius: 25px;
  display: block;
  min-width: 64px;
  max-width:128px;
  min-height: 64px;
  max-height:128px;
  width: auto;
  height: auto;
}


/* Pop */
@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}

@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
}
/*Does button animation from hover.css class*/
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

'use strict';
// This creates to folding animation
$(window).scroll(function() {
  var heroHeight = $('header').height();
  var yPosition = $(document).scrollTop();


  if (yPosition <= heroHeight) {
    var effectFactor = yPosition / heroHeight;
    var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
    $('.hero').css({
      '-webkit-transform': 'rotateX('+rotation+'rad)',
      'transform': 'rotateX('+rotation+'rad)',
    })
    .find('.overlay').css('opacity', effectFactor);
  }


  /**
   * Sticky nav-bar
   */
  if (yPosition <= heroHeight) {
    $('nav').removeClass('fixed');
  } else {
    $('nav').addClass('fixed');
  }

});

$(document).ready( function () {
    var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
    $("nav ul a.current").removeClass("current");
    $("nav ul a[href='" + pathname  + "']").addClass("current");
});

Answer 1

这个怎么样。

使用div.page-subject代替标记并使用

div.page-subject {
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    margin: 1rem 0;
}

Answer 2

只需添加：

div.page-subject {
    vertical-align: middle;
    display: table-cell;
}

这是Fiddle。

Answer 3

水平居中很容易。

display: block;
margin: auto;
position: relative, absolute, or fixed depending...

垂直居中需要做更多工作，我总是这样做。

top: 50%;
transform: translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;

但是你也可以使用变换

来完成所有操作

top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
position: relative, absolute, or fixed depending...
display: block;

如果使用转换，请不要忘记使用供应商前缀。我使用这个自动前缀：http://pleeease.io/play/

Answer 4

试试这个

.hero{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Answer 5

将div水平居中，尝试使用此

/* lets say its width is 500px */
.hero{
    width:500px;
    display:block; 
    margin-left:auto;
    margin-right:auto;
    background:#FFFFFF;
}

如果你想让它在纵向和横向都是，那么你必须将位置设置为绝对，就像这样，

.hero {
    width:500px;
    height:500px;
    position:absolute;
    left:50%; /* centers horizontally on the screen */
    top:50%; /* centers vertically on the screen */
    background-repeat:no-repeat;
    background-position:center;
    margin:-250px 0 0 -250px; /* is width and height divided by two */
    background:#FFFFFF;
}

您必须将 overlay元素设置为.hero元素的父元素，并且overlay元素应该像这样，

.overlay {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7); 
    z-index:9999; /* makes sure it stays on top */}

将div放在带有叠加层的页面上

5 个答案: