Html 东西不在Div中居中

我是这方面的新手，我正在努力找出我做错了什么。我想把一切都集中在一个分区内，但无论我做什么，它都不会移动

你们能给点建议吗

<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-->

---

添加

文本对齐：居中到您的
以使其居中。另外，删除
位置：绝对从
#intro
开始，将其文本居中

工作代码片段：


#main 1{
宽度：100%；
高度：700px；
保证金：0；
位置：相对位置；
背景色：#CCC；
}
#main1 h1{
文本对齐：居中；
}
#头衔{
位置：绝对位置；
顶部：500px；
右：自动；
保证金：自动；
}
#介绍{
底部：0px；
宽度：50%；
保证金：0自动；
/*位置：绝对位置*/
文本对齐：居中；
}

废话
贝蒂娜是一位正在学习编码的设计师。她很固执，有点不知所措，因为她不知道自己在做什么

您可以使父DIV（#main1）首先获得中心对齐。使其下的图元移动到中心。Als也对intro div（#intro）进行了更改，使其位于标题的中心和下方

    #main1 {
    width:100%;
    height:700px;
    margin:0;
    position:relative;
    background-color:#CCC;
    text-align:center;
    }

    #intro {
    margin: auto;
    width:50%;
    text-align:center;
    }

居中本质上意味着识别
text align:center
应该保留用于居中文本，因此它适用于H1标记或p标记。当谈到DIV时，如果使用边距和宽度样式，通常可以强制DIV居中。如果您遇到问题，请查看您是否已将
位置：绝对
应用于DIV，并将其删除或更改为
位置：相对
，或者如果安装
位置：静态
。下面是我建议的一些代码，它们将文本垂直和水平居中，如下所示：

#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;

}

注意：我改变了高度，这样你可以在现场演示中更好地看到结果；请参阅下面的链接

我基本上使用了提供的HTML，并使用了类似字数的文本。CSS将包含段落的DIV居中。P标签的CSS给人一种文本居中的错觉，而没有实际应用
文本对齐：居中
，以防止每一行文本居中，这在阅读句子时可能会在视觉上令人讨厌

<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-->  


居中的
居中可能会带来很多乐趣，也可能会导致很多挫折。这要看情况而定。有时这是一个挑战，有时它就是这样


现场演示
感谢您的建议！这就是我最后要做的：

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

选中此项：只需从#简介中删除
位置：相对
。从#简介中删除
底部：0px
。你想把东西放在哪个
div
中间？@Hrishi我只希望标题和简介在灰色框中水平居中。谢谢Sharon，如果我想把简介div放在div的底部但仍然水平居中怎么办？请看。我基本上改变了H1标记的padding top值使用百分比到实际像素的方式。我给东西上色只是为了演示，以指示不同的盒子区域。然后，我调整了#intro DIV的填充。
#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;
}