css有哪些方式可以实现垂直居中？

css有哪些方式可以实现垂直居中？

1背景介绍

我们在设计网页的时候，盒子居中是经会常用到的。居中可以分为水平居中和垂直居中。水平居中是比较容易，通过设置元素的margin: 0 auto就可以实现，但是垂直居中相对来说是比较复杂一些的。

2知识剖析

垂直居中就是竖向居中 ，所以来掌握css实现垂直居中的方式。

3常见问题

css有哪些方式可以实现垂直居中

4解决方案

首先我们先定义一个需要垂直居中的div元素，如下：


效果如下：

我们需要row在container之中垂直居中，如图：

一 transform实现CSS垂直居中

二 margin：auto实现CSS垂直居中

三 display:flex实现CSS垂直居中

四 padding实现CSS垂直居中

五 伪元素:before实现CSS垂直居中

六 通过隐藏节点实现CSS垂直居中
创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。


七 line-height实现CSS垂直居中
适用于子元素为单行文本的情况。

5编码实战

6拓展思考

CSS如何水平居中
方法如下：
1.子元素margin: auto;

2.对于行内元素 text-align: center;

3.绝对定位+left+ margin-left

4.绝对定位+left+ translatex

5.子元素display: table;

6.父元素 display: flex;+子元素margin：auto；

7.父元素display: flex;

7参考文献

参考一：

CSS水平居中，垂直居中

8更多讨论

1 如何实现图片内容居中?
可以用父容器的line-height来实现

<div class="container">
   <div class="row">
        <img src="" alt="">
   </div>
</div>

.container{
   margin:20px;
   line-height:500px;
   text-align:center;
}

.row{
   display:inline-block;
   vertical-align:middle;
   line-height:normal;
}

.row img{
   max-width:100px;
}

2 多行文本如何垂直居中？

<div class="container">
			<p class="two1">多行文本；</p>
			<p class="two2">我要进行垂直居中</p>
		</div>

.container{
		    	height: 200px;
		    	background-color: gray;
		    	display: table;
		    	text-align: center;
		    }
		    
		    .two1{display: table-cell;vertical-align: middle;}
		    .two2{display: table-cell;vertical-align: middle;}

3 如何让一个DIV水平，垂直方向都居中于浏览器？

<style type="text/css">
<!-- 
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>垂直居中于浏览器窗口</div> 

感谢大家观看

By 要来点本子吗