stackoom
  简体   繁体   中英

Centering a div on a page with an overlay

 原文  2016-05-13 04:09:47  2   5    javascript/ jquery/ html/ css/ css3

Question

I've recently begun to learn HTML, CSS, JavaScript, and jQuery from this set of books .

I've tried every obvious answer I could dig up on Stack Overflow to do what is normally the very simple task of centering a div on a page. My particular page has an overlay, which I suspect is part of my problem. I'm working to adapt a CodePen to my project. In this CodePen, only one element, an H1 tag, needs to be centered on a page and it works fine.

On my page, I'm replacing a h1 tag with a div. I've included a link to jsFiddle with comments re: what I've tried to do. I know I'm missing something really simple, but I'm unable to figure out what it is.

Thank you for reading and I welcome your suggestions for this front-end noob.

Below is my problematic code: 

<!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");
});

5 answers

solution1
 1  2016-05-13 04:27:22

How about this.

Use div.page-subject instead of the tag and use 

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

solution2
 1 ACCPTED  2016-05-13 06:40:48

Just add this: 

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

Here is Fiddle .

solution3
 0  2016-05-13 04:41:21

Centering things horizontally is easy. 

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

Centering thing vertically takes more work and I always do it this way. 

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

However you can also do it all with transforms 

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

If using transforms don't forget to use vendor prefixes. I use this auto prefixer: http://pleeease.io/play/

solution4
 0  2016-05-13 05:20:27

Try this 

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

solution5
 0  2016-05-13 06:29:57

to center a div horizontally try to use this one 

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

if you wanted to make it center both vertically and horizontally then you must have to set its position to absolute like this one, 

.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;
}

You have to set overlay element as a parent of a .hero element and overlay element should be like this one, 

.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 */}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Centering a div on a scrolled page Javascript centering a div on the page Centering overlay in the screen even if the page is scrollable Centering DIV Horizontally & Vertically on Page Load Left aligned div not centering on certain page sizes centering google maps overlay centering the page doesnt work with body selector but does with div page wrap Center a one page horizontally scrolling site in browser (not centering a div) centering a div within a div vertically centering a div in a div
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM