1.css实现三角形

.one {

width: 0;

height: 0;

border-top: 200px solid red;

border-bottom: 200px solid blue;

border-left: 200px solid #FFFFFF;

border-right: 200px solid #FFFFFF;

}

2.css布局的应用场景，三栏布局（固定左右，中间自动）

<!DOCTYPE HTML>
<html>
<head>
<style>

.outer{
position:relative;
background:#DCDCDC; /*灰*/
}
.left{
width:200px;
height:400px;
position:absolute;
left:0;
background:#ff9900;; /*橘色*/
}
.middle{
height:100%;
margin-left:200px; /*左子元素宽度*/
margin-right:300px; /*右子元素宽度*/
background:#fff700; /*黄色*/
}
.right{
width:300px;
height:300px;
position:absolute;
right:0;
background:#93ec7c; /*绿色*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner left">left</div>
<div class="inner right">right</div>
<div class="inner middle">middle</div>
</div>
</body>
</html>

3.实现垂直居中

（1）单行文本垂直居中

#child {
line-height: 200px;
}

（2）多行文本垂直居中

父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中

html：

<div class="span_box bg_box">
<span class="words_span">
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
</span>
</div>

css：
.bg_box {
   width: 300px;
   height: 300px;
   margin-top: 20px;
   background-color: #BBBBBB;
}

.span_box {
   display: table;
}
.words_span {
   display: table-cell;
   vertical-align: middle;
}

（3）图片垂直居中

#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

（4）基于绝对定位的pc端实现

.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

（5）其他

代码：

html

1
2
3

<div id="parent">
<div id="child">Content here</div>
</div>

css

#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

低版本 IE fix bug：

1
2
3

#child {
display: inline-block;
}

块级元素

css

#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

总结：关于垂直居中，有很多大佬都总结了好多，我看了也没记住，所以我选了自己用到的几个～～

前端题目杂记

1.css实现三角形

2.css布局的应用场景，三栏布局（固定左右，中间自动）

3.实现垂直居中

猜你喜欢