Stuff is not centering in Div - html

Question

I'm a newbie at this and I'm trying to figure out what I'm doing wrong. I want to centre everything within a div, but it won't budge no matter what I do.
Could you guys advise?
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}

Answer 1

Add text-align:center; to your <h1> for it to center. Also, remove position:absolute; from #intro for its text to center.
Working Code Snippet:
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
}
#main1 h1{
text-align:center;
}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro{
bottom:0px;
width:50%;
margin:0 auto;
/*position:absolute;*/
text-align:center;
}
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
</div><!--main1-->

Answer 2

You can make the parent DIV (#main1) get the center alignment first. So that elements under it are moved to the center. Als have made change for intro div(#intro) too so that it is centered and below your header.
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
text-align:center;
}
#intro {
margin: auto;
width:50%;
text-align:center;
}

Answer 3

Centering essentially means recognizing that text-align:centershould be reserved for centering text, so it's appropriate for an H1 tag or a P tag. When it comes to DIVs, if you work with margin and width styling you can usually compel a DIV to center. If you're having an issue see if you have applied position:absolute to the DIV and either remove it or change it to position:relative or if fitting position:static. Here's some code that I suggest which centers the text vertically and horizontally, as follows:
#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
padding-top:33%;
text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;
margin:auto;
background:#fff;
padding:32px;
}
#intro p {
text-align:justify;
}
Note: I changed the height so you could better see the results in the live demo; see below link.
I essentially worked with the HTML provided and used text of similar word count. The CSS centers the DIV containing the paragraph. The CSS for the P tag gives the illusion of centered text without actually applying text-align: center, to prevent each line of text being centered which can be visually annoying when reading sentences.
<div id="main1">
<h1>Centered</h1>
<div id="intro">
<p>Centering can be a lot of fun or it can lead to much frustration. It all depends. Sometimes it's a challenge and sometimes it's just what it is.</p>
</div><!--intro-->
Live demo here

Answer 4

Thank you for all your suggestions! This is what I've ended up doing:
#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}