出门面试吧必考题目垂直居中百试不厌,不要问我为什么就是这么重要就是这么强势,你以为你会了吗其实我们都只是略知皮毛真正在项目里你会很头疼,话不多说我们
开始今天的表演。
1.CSS样式与HTML中标签属性的区别:
标签的属性是采用 属性名=“属性值” 表示的
CSS样式是采用名值对 属性名:属性值; 表示的
2.内联元素(行内元素)与块元素
(1)内联元素及其特点:
所谓的行内元素,指的是只占自身大小,不会独占一行
常见的内联元素:
a img iframe span
span没有任何语义,span标签专门用来选中文字,并对该文字设置样式
对内联元素设置宽高是无效的,也不可以设置行高,其宽度和高度都默认被元素撑开
将内联元素放在 li 标签中可以设置其宽高
可以对内联元素设置内边距,IE6以上浏览器支持
可以对内联元素设置外边距,但只对左右外边距起作用
(2)块元素:
所谓的块元素是会独占一行的元素,无论他的内容多少都会独占一行
p h1 h2 h3...都是块元素
div标签没有任何语义,就是一个纯粹的块元素,并不会对其里面的元素设置任何样式
可以对块元素设置高度和边距
如果不自己设置宽度,其宽度为其父元素宽度
块元素中可以容纳块元素和内联元素,但内联元素中不能包含块元素
3.几种居中方式
(1)设置块元素中文字水平居中
使用text-align 样式设置块中文本或图片居中。
该样式只能操作块元素或者被CSS 显示成块元素的内联元素
对一个块元素设置该样式后,其子块元素中的文本或者图片也会相对于其子块元素居中
(2)块元素自身水平居中
通过设置 magin:0 auto; 使该块元素在其父元素中水平居中显示
(3)内联元素的垂直居中
通过设置 vertical-algin 样式
该属性适用于:
内联元素(被转换成内联元素的块元素)
display 设置为 table-cell 的元素
在 table 也就是表格中的元素
(4)设置块元素中文字垂直居中
通过设置块元素的内边距
(5)块元素自身垂直居中
可以通过设置外边距实现
通过绝对定位设置其距离父元素的 left right top bottom 来实现
这里直接上代码简单粗暴没毛病,垂直居中设置:
-
1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;
.box{ position:absolute;/*或fixed*/ top:50%; left:50%; margin-top:-100px; margin-left:-200px; }
- 2.利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;
.box{
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
- 3.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;
HTML代码:
<div class="box">
<span>多行文字,此处居中设置</span>
</div>
CSS代码:
.box{
display:table-cell;
vertical-align:middle;
text-align:center;
100px;
height:120px;
background:purple;
}
.box span{
display: inline-block;
vertical-align: middle;
}
- 4.使用css3的新属性transform:translate(x,y)属性;
.box{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
- 5.最高大上的一种,使用before,after伪元素;
HTML代码:
<div class='box'>
<div class='content'>
垂直居中
</div>
</div>
CSS代码:
.box{
position:fixed;
display:block;
background:rgba(0,0,0,.5);
}
.box:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.box:after{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.box .content{
60px;
height:60px;
line-height:60px;
color:red;
}
- 6.Flex布局;
.box{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
水平居中
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-pack:center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
垂直居中
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-align:center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}