本文详细介绍了如何使用CSS实现图片的垂直居中对齐和底端对齐，通过实例演示了通过`display: table`和`position: absolute`等技术来达成这两种效果，适合前端开发者深入理解布局技巧。
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐！更多内容请参考本站的CSS视频教程。
CSS使图片垂直居中的代码：
图片垂直居中div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}
演示效果如下：
图片垂直居中div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
CSS使图片底端对齐的代码：
图片底端对齐div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content div{position: absolute;left: 0;bottom: 0;}
演示效果如下：
图片底端对齐div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content div{position: absolute;left: 0;bottom: 0;}
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
