How to Center a Div Within a Div Without Using Absolute Positioning

Hi folks, I’m doing a website project, and the instructor doesn’t use any absolute positioning to center his div within a div, but somehow his method works. But, when I copy his method, mine doesn’t work. Can you tell me why? See screenshots below. This is driving me insane! Thanks in advance for any help! Cheers!



Look at instructor’s version here (his is perfect):

Here’s my CSS code:

*{
	box-sizing: border-box;
}

body{
 font-family: 'Roboto', sans-serif;
 background-color: #19202a;
}

#top-section{
	position: relative;
	height: 100vh;
}

header{
	position: absolute;
	z-index: 3;
	padding: 20px;
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 0 10px;
}

.logo{
	width: 50px;
}

.logo img{
	width: 100%;
}

nav{
	align-self: center;
}

nav a{
	color: white;
	text-decoration: none;
	font-size: 1.2rem
	font-weight: 300;
	padding:0;
}

.blurred-background{
	background-image: linear-gradient(45deg, rgba(25,32,42,1) 0%,rgba(25,32,42,1) 33%,rgba(25,32,42,0.96) 36%, rgba(25,32,42,0.47) 69%, rgba(176, 38,183,0.32) 79%, rgba(125,185,232,0) 100%), url("https://s15.postimg.cc/qjk9kwnt7/top.jpg");
	background-size: cover;
	width: 100%;
	height: 100vh;
	filter: blur(40px) saturate(130%);
	position: absolute;
	z-index: 1;
}
.floating-img{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	z-index: 2;
}
.Tekashi-img{
	width: 30%;	
}

.Tekashi-img.img{
	width: 100%;
	filter: contrast(150%);
}

.container{
	max-width: 1400px;
	margin: 0 auto;
}

#bio {
  /*display: flex;*/
  /*padding: 50px;*/
  background: black;
  position: relative;
  z-index: 3;
  padding: 100px 0;
}

#bio .container {
  display: flex;
}

#bio p {
  color: white;
  line-height: 1.8;
  font-size: 0.9rem;
  padding: 50px;
  /*display: flex;*/
  padding: 0 50px; 
}

#bio .logo-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 0 50px;
}

#media{
	background-image: url('https://s15.postimg.cc/dun7slqij/original.jpg');
	background-size: cover;
	padding: 100px 0;
}

#media .title{
 background-color: black;
 font-size: 1.1rem;
 font-weight: 300;
 text-transform: uppercase;
 padding: 20px;
 text-align: center;
 width: 100%;
 max-width: 500px;
 margin: 0 auto;
/* margin-bottom: 0 0  80px 0;*/
 color: white;
}

#media .videos{
	display: grid;
	grid-template-columns:50% 50%;
	grid-gap: 50px;
}

.videos .video{
	border-radius: 4px;
	overflow: hidden;
	height: 300px;
	-webkit-box-shadow: 0 5px 0 0 rgba(0,0,0,0.75);
	-moz-box-shadow: 0 5px 0 0 rgba(0,0,0,0.75);
	box-shadow: 0 13px 24px -8px 0 rgba(0,0,0,0.75);
}

.videos iframe{
	height: 100%;	
}

And here’s my HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </head>
  <body>
  	<header>
  		<div class="logo">
  		<a href="#"><img src="https://s15.postimg.cc/61he9krdn/logo.png"></a>
  		</div>
  		<nav>
  			<a href="">Bio</a>
  			<a href="">Tour</a>
  			<a href="">Music</a>
  			<a href="">Videos</a>
  			<a href="">Shop</a>
  		</nav>
  	</header>
    <section id="top-section">
    	<div class="blurred-background"></div>
    	<div class="floating-img">
    	  <div class="Tekashi-img"><img src="https://s15.postimg.cc/rlug3593v/tekashi.png"></div>
    	</div>
    </section>
    <section id="bio">
	    <div class="container">
		    <p>
		    Hernandez rose to prominence on social media due to a July 2017 Instagram post that went viral on both Reddit and Twitter, where Hernandez's eccentric appearance (rainbow-dyed hair, a rainbow grill, and multiple versions of the number 69 tattooed on his body) turned him into an internet meme. Hernandez's commercial debut single "Gummo" was released on November 10, 2017 and eventually peaked at number 12 on the US Billboard Hot 100. It was certified platinum by the RIAA on March 5, 2018. His next single "Kooda" debuted at 61 on the Hot 100 the week of December 23, 2017. On January 14, 2018, Hernandez released his third single "Keke" with Fetty Wap and A Boogie wit da Hoodie. Shortly afterwards, Hernandez announced his debut mixtape, Day69. The mixtape was released on February 23, 2018, and debuted at number four on the Billboard 200 album chart with 55,000 album-equivalent units, of which 20,000 were pure sales. According to Jon Caramanica of The New York Times, the tape was an outgrowth of the "SoundCloud rap explosion", and was notable for its willingness to deviate from hip-hop's norms and prevailing sound.	
		    </p>
		    <div class="logo-centered">
		    	<img src="https://s15.postimg.cc/61he9krdn/logo.png">
		    </div>
	    </div>	
    </section>
    <section id="media">
    	<div class="title">Latest Videos</div>
    	<div class="videos">
    		<div class="video">
    			<iframe width="100%" height="315" src="https://www.youtube.com/embed/z5WrgDzNIZ0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    		</div>
    		<div class="video">
    			<iframe width="100%" height="315" src="https://www.youtube.com/embed/V_MXGdSBbAI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    		</div>
    		<div class="video">
    			<iframe width="100%" height="315" src="https://www.youtube.com/embed/lgEk3Niie1E" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    		</div>
    		<div class="video">
    			<iframe width="100%" height="315" src="https://www.youtube.com/embed/ycV6cnK3SIs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    		</div>
    	</div>
    </section>
    <div id="app"></div>
    <script src="/js/components/vendor.js"></script>
    <script src="/js/components/firstComp.js"></script>
  </body>
</html>

You can use – margin : 0 auto;

Hi @StanSkrivanek, margin: 0 auto works, but it leaves a huge gap between the grid columns…?


Also, why is it that the instructor didn’t use margin auto, but his div is still centered within the div…weird…

You need to figure out what has to be done and where margin: 0 auto should be applied. I can give you hint: create “div” wrapper

@StanSkrivanek, I got your concept to work kind of, because the images are now between the borders of the background image…but right now I’m about to figure out how to close that big gap between the grid columns…as you can see in the last screen shot I posted…

your grid gap is 50px erase 0 and you are done


Even if I change the grid-gap, the gap is still there…see screen shot above
CSS code for the videos div:

#media .videos{
	padding:80px 50px;
	display: grid;
	grid-template-columns:50% 50%;
	grid-gap: 5px;
}

CSS code for media div (which is essentially a wrapper div):

#media{
	background-image: url('https://s15.postimg.cc/dun7slqij/original.jpg');
	background-size: cover;
	padding: 100px 0;
}

Why you use so large numbers for padding. Just comment padding out and see whats happened. But did you tried to wrap <div class="video"> in outer div like:

<div class="outer"> // .outer{margin: 0 auto;}
    <div class="video"> 

Its up to you how you apply code to get as expected result

Because I was just following his steps lol. Why is his perfect but mines isn’t and we both nearly the same code? Crazy!

So you had to overlook something. Try example above.

1 Like

But your question was only how to centred elements without relative / absolute. Header is text-align: center; and other options are on table. Or read Grid manual fo other solutions, all is relative to way how you use your code.

1 Like

@StanSkrivanek, thanks for the help! About to try out that example and get back to you.

I had look now thru your code and GTC is 50/50 so try to your div “.outer” give for example width: 80%; Like I said there is many options how to get final result.

@StanSkrivanek, what’s GTC?

grid-template-columns: Sorry I mess two letters :slight_smile:

1 Like

In CSS Grid is better to use ‘fr’ units (fractions) then % do grid-template-columns: 1fr, 1fr.

Yeah! Exactly! That’s usually what I use! And maybe, it’s also because of browser issues (Chrome vs Safari).

Im using Safari with no problems, There are some tricks in code that you have to use to make it look in safari the way as in chrome but generally all is working well in Safari, Firefox, Opera, Chrome. Firefox has the BEST tool for showing grid to get an idea what is going on

I’m using Chrome…I think the instructor is using Safari…because he’s on a Mac… Also, Firefox has the developer box on the bottom…not in a left-sdide tab like Chrome…and that is annoying!

There is NO DIFFERENCE. Chrome have “Best” tools for devs, Im using Firefox or Chrome as dev tools and Safari only to check if there are any problems. With chrome you should be safe. :slight_smile:

1 Like