web前端如何实现CSS竖向居中
⽬录
⼀、使⽤Flexbox实现CSS竖向居中
⼀、理解vertical-align或“如何竖向居中”
1、Table单元格中的vertical-align
2、 vertical-align在inline元素上效果
3、 vertical-align在其它元素上的效果
三、竖向居中最简单的⽅法(三⾏CSS3代码)
四、 常见简单垂直剧中⽅法⽐较
⼀、使⽤Flexbox实现CSS竖向居中
竖向居中需要⼀个⽗元素和⼀个⼦元素合作完成
<div class="flexbox-container">
<div class="flexbox-vert-item">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div class="flexbox-vert-item">Blah blah blah blah blah blah blah blah blah </div>
<div class="flexbox-vert-item">Blah blah</div>
</div>
但为了让⼦元素竖向居中，你只需要对⽗元素施加CSS样式：
.flexbox-container {
padding: 20px;
background: #eee;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
不出国考托福有用吗-webkit-box-align: center;
align-items: center;
carin
}
.flexbox-vert-item {
width: 300px;
background: #fefefe;
margin-right: 20px;
padding: 10px;
}
archivetab因为上⾯使⽤了浏览器引擎前缀，所以看起来有些复杂，但实际上本质是⾮常简单的，也就3句代码。
display: flex;
flex-align: center;
align-items: center;
⼆、理解vertical-align或如何竖向居中
vertical-align 不同使⽤场合的理解
1、Table单元格中的vertical-align
当出现在Table单元格中时，vertical-align的效果会如⼤多数⼈的预期⼀样，它会跟(⽼的，不⿎励使⽤)的valign属性的作⽤⼀样。在现代浏览器⾥，下⾯的这三种写法的效果是⼀样的：
```
<td valign="middle"> <!-- 这是⼀种会逐渐被淘汰的⽤法 --> </td>
<td > ... </td>
<div > ... </div>
```
在浏览器中，它们的现实效果是下⾯这样
2、vertical-align在inline元素上效果
当vertical-align被应⽤的到inline元素上时，它的作⽤却是类似(⽼的，不⿎励使⽤)的valign属性对<img>的作⽤⼀样。在现代浏览器⾥，下⾯的这三种写法的效果是⼀样的：
```
<div >
<img valign="middle" src="tab_home.png">
<img src="tab_home_pre.png">
<span > ⽰例 </span>
</div>
```
```
<div >
privacy是什么意思
<img valign="middle" src="tab_home.png">
<img src="tab_home_pre.png">
<span > ⽰例 </span>
</div>
```
⽤<span > ⽰例 </span>和<span >⽰例 </span>作为例⼦，在浏览器中，它们的现实效果是下⾯这样：
美语训练班
由此可见，valign="middle"和vertical-align:bottom⽤在inline元素上的效果是⼀样。
3、vertical-align在其它元素上的效果
将vertical-align属性应⽤到⼀个block元素(例如标准的<div>)上时，⼤多数浏览器会依照继承的原则，将所有它的inline⼦元素也应⽤这个属性。那么，如何将⼀个元素竖向居中？
⽅法⼀
前提：
* 你需要把想要竖向居中的内容放到⼀个block元素中，并给这个想要居中的元素指定固定的⾼度。
* 绝对定位(absolutely-position)这个元素。(通常这样做是没问题的，因为你这个想要居中的元素的⽗元素仍然可以使⽤相对位置)。
⽅法：
* 指定⽗元素为position:relative 或 position:absolute。
* 给⼦元素指定固定的⾼度。
* 给⼦元素设定position:absolute 以及 top:50%，让⼦元素移动到⽗元素内部上下居中的位置。
* 给⼦元素设定 margin-top:-yy，这⾥的 yy 的值是你的⼦元素的⾼度的⼀半，弥补居中时的偏差。
```CSS代码
<style type="text/css">
#myoutercontainer {
position: relative;
height: 13em;
border: 1px solid black;
}
#myinnercontainer {
position: absolute;
暑假英语作文
top: 50%;
height: 6em;
margin-top: -3em;
}
</style>
```
```HTML代码
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hi，我竖向居中了！</p>
<p>感觉很犀利的哦!</p>
</div>
stepmother
</div>wlan读什么
```
⽅法⼆
前提：
* 需要竖向居中的内容只有⼀⾏⽂字。
* 需要对⽗元素设定固定的⾼度。
triangle是什么意思⽅法：
* 将⽗元素的line-height设置为你想要的⾼度。 ```CSS代码
<style type="text/css">
#myoutercontainer2 {
line-height: 4em;
border: 1px solid black;
