课程名称：初识HTML(5)+CSS(3)-升级版
章节名称：第15章 css样式设置小技巧
讲师姓名：五月的夏天
课程内容：
水平居中设置-行内元素
水平居中设置-定宽块状元素
课程收获：
1.水平居中设置-行内元素：
（1）如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>（2）代码：
2.水平居中设置-定宽块状元素：
（1）当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
（2）满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>也可以写成：
margin-left:auto; margin-right:auto;
注意：元素的“上下 margin” 是可以随意设置的。
（3）代码：
每天学习一点点，加油！！