转自
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法，每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可。
试用：单行文本垂直居中，demo
代码：
html
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | <div id="parent"> <div id="child">Text here</div> </div> Salin selepas log masuk |
css
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | #child { line-height: 200px; }Salin selepas log masuk |
垂直居中一张图片，代码如下
html
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | <div id="parent"> <img src="image.png" alt=""> </div> Salin selepas log masuk |
css
123456 Salin selepas log masuk Salin selepas log masuk | #parent { line-height: 200px; } #parent img { vertical-align: middle; }Salin selepas log masuk |
适用：通用，demo
代码：
html
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | <div id="parent"> <div id="child">Content here</div> </div> Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk |
css
12345 Salin selepas log masuk | #parent {display: table;} #child { display: table-cell; vertical-align: middle; }Salin selepas log masuk |
低版本 IE fix bug：
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | #child { display: inline-block; }Salin selepas log masuk |
适用：块级元素，demo
代码：
html
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | <div id="parent"> <div id="child">Content here</div> </div> Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk |
css
123456789 Salin selepas log masuk | #parent {position: relative;} #child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; }Salin selepas log masuk |
适用：通用，但在IE版本低于7时不能正常工作，demo
代码：
html
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | <div id="parent"> <div id="child">Content here</div> </div> Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk |
css
1234567891011 Salin selepas log masuk Salin selepas log masuk | #parent {position: relative;} #child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto; }Salin selepas log masuk |
适用：通用，demo
代码：
html
123 Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk | <div id="parent"> <div id="child">Content here</div> </div> Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk Salin selepas log masuk |
css
123456 Salin selepas log masuk Salin selepas log masuk | #parent { padding: 5% 0; } #child { padding: 10% 0; }Salin selepas log masuk |
适用：通用，demo
代码：
html
1234 Salin selepas log masuk | <div id="parent"> <div id="floater"></div> <div id="child">Content here</div> </div> Salin selepas log masuk |
css
1234567891011 Salin selepas log masuk Salin selepas log masuk | #parent {height: 250px;} #floater { float: left; height: 50%; width: 100%; margin-bottom: -50px; } #child { clear: both; height: 100px; }Salin selepas log masuk |
以上就是六种方法，可以在实际的使用过程中合理选择，参考文章《vertical-centering》。
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
