首页 > 开发 > CSS > 正文

CSS在固定宽高的div内实现垂直居中的实例详解

2024-07-11 08:32:53

字体：大中小

来源：转载

供稿：网友

需求案例

案例是这样的，一个外层div,高宽是固定的，但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin，这样，里面内容显得貌似是居中了，但是假如内容变化，这样头部的固定padding或者margin，始终不变。造成了垂直方向不会居中！

我们知道，假如下面一个div

CSS Code复制内容到剪贴板

<div class="outer"><div class="inner">haorooms内部内容</div></div>

样式是这样的

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复制内容到剪贴板

<div class="outer"> <div class="inner">haorooms内部内容</div><div class="v">cssHack</div>
</div>

样式如下：

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;

上一篇：浅谈CSS中的clear清除浮动

下一篇：CSS使用BFC规则布局引发外层div包裹内层div的处理方法

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注