【HTML5+CSS3自学笔记】第十五节：css样式设置小技巧
学习教程来源：慕课网-初识HTML(5)+CSS(3)-升级版 by：五月的夏天
水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。
（块状元素特点：可以设置宽度、高度、边距，宽度100%，自己独自占满一整行，会自动换行。如div,p,h1,ul,ol,form
行内元素特点：不可以设置宽度、高度、边距，不会占满整行，不会自动换行，和其他元素在一行。如a,span,em,strong,b
行内块状元素特点：可以设置宽度、高度，可以独占一行，不会自动换行。如img,input）
今天我们先来了解一下行内元素怎么进行水平居中？
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
css代码：
<style>
.txtCenter{
text-align:center;
}
</style>
水平居中设置-定宽块状元素
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右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” 是可以随意设置的。
面试常考题之已知宽高实现盒子水平垂直居中
这一章节我们来学习已知宽高实现盒子水平垂直居中。通常使用定位完成，例如想要实现以下效果：
我们有如下两个div元素
要实现子元素相对于父元素垂直水平居中,我们只需要输入以下代码：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。效果：
3、然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。
面试常考题之宽高不定实现盒子水平垂直居中
这一章我们来学习未知宽高实现盒子水平垂直居中，通常使用定位以及translate完成。参考下面例子：
<div class="box">
<div class="box1">
慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
</div>
</div>
添加样式：
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果如下：
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
- 点赞
- 收藏
- 关注作者
评论（0）