您现在的位置是：网站首页>列表内容
CSS在固定宽高的div内实现垂直居中的实例详解CSS水平垂直居中的几种方法总结css让容器水平垂直居中的7种方式利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS设置文字图片垂直居中的方法总结深入理解CSS行高line-height与文本垂直居中的原理Flexbox制作CSS布局实现水平垂直居中的简单实例CSS设置DIV垂直居中的N种方法 兼容IE浏览器 CSS文本和div垂直居中方法总结 CSS 实现垂直居中的几种方法(必看)CSS实现垂直居中的几种方法小结
2023-10-22 16:55:29
101人已围观
简介 这篇文章主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下
需求案例
案例是这样的，一个外层div,高宽是固定的，但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin，这样，里面内容显得貌似是居中了，但是假如内容变化，这样头部的固定padding或者margin，始终不变。造成了垂直方向不会居中！
我们知道，假如下面一个div
CSS Code复制内容到剪贴板
样式是这样的
CSS Code复制内容到剪贴板
- .outer{text-align:center;vertical-align: middle;width:200px;height:350px;}
vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了，和我上面说的，加margin等等！那对于这种情况，有没有更好的解决方案呢？
解决方法
思路：加一个cssHack，设置cssHack的line-height等于外层div的高度，就可以使用vertical-align:middle了！
div如下：
CSS Code复制内容到剪贴板
样式如下：
CSS Code复制内容到剪贴板
- * {
- margin: 0;
- padding: 0;
- }
- .outer {
- background-color: #ccc;
- font-size: 24px;
- height: 350px;
- text-align: center;
- overflow: hidden;
- width: 280px;
- }
- .outer .inner,
- .outer .v {
- display: inline-block;
- zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */
- }
- .outer .inner {
- line-height: 1.8;
- padding: 0 4px 0 5px;
- vertical-align: middle;
- width: 262px;
- }
- .outer .v {
- line-height: 350px;
- text-indent:-9999px;
- width: 1px;
- }
这样就实现了div内部的垂直居中了！
