一个高度不固定的div，里面的文字如何垂直居中？

最近在做项目中遇到父元素高度不固定，但是Dom元素里面的文本内容需要上下居中显示,解决方案：
一、针对弹性布局的盒子：
垂直居中：

align-items:center; display: -webkit-flex;

水平居中：

justify-content:center; display: -webkit-flex;

二、可通过js动态设置：
先获取这个div的高度，然后通过js设置这个div的line-height=div高度

三、通过css设置：

<div>
<div style="height:50%;text-align:center;">
<span style="display:inline-block; vertical-align:middle">这里是文字</span>
</div>
</div>

注：这个是水平和垂直都居中。如果不要水平居中删除text-align:center;

四、通过定位的方式：

/* CSS部分 */
#div7{ height:200px; background:#000; }
#div7>div{ height:50%; position:relative; background:#F00; }
/* 如果不要求横向居中请把 left:50% 去掉，并把 transform:translate(-50%,-50%) 改为 transform:translateY(-50%) */
#div7>div>div{ background:#06C; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

<!-- HTML部分 -->
<div id="div7"><div><div>这里是文字</div></div>
</div>

一个高度不固定的div，里面的文字如何垂直居中？相关推荐

高度不固定的div文字垂直居中
垂直居中:1653align-items:center; display: -webkit-flex; 水平居中:justify-content:center; display: -webkit-fl ...
让div中的文字水平垂直居中
总所周知水平居中为:text-align:center 垂直居中为:line-height:100px (此处100px为外边div的宽度)
一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
在div中设置文字与内部div垂直居中
要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html><head lang="zh"><meta ht ...
Android 实现TextView后面跟随一个高度和宽度固定的ImageView
安卓实现TextView后面跟随一个高度和宽度固定的ImageView(不要问我为什么不直接用drawableRight,因为宽高不好控制)TextView只为1行,即singleLine为true, ...
html自动生成盒子,新建一个宽度450px 高度为100px的DIV盒子
新建一个宽度450px 高度为100px的DIV盒子实例,教程通过从新建html 新建CSS代码再到DIV代码再到实例浏览器测试学习. 快捷建立一个标准的DIV盒子的HTML网页,DIVCSS5推荐使 ...
解决css内容高度不固定，transition手风琴效果失效的情况（展开收起）
最近写了一个筛选功能,要使用手风琴效果展开内容,但是高度不固定,故此添加的动画效果失效,对此有两种解决方案动画失效的原理是: 如果当前设置动画的元素他的父元素高度为auto的时候,且当前元素未设置p ...
ios开发自定义btn_iOS一步步实现一个高度自定义UIButton控件
需求背景日常开发中UIButton的图片与标题默认的布局是固定的,是在水平方向左右排列.但是我们会经常需要更改image和title的位置来实现需求,这是个很常见的需求就不多说了.所以下面就来谈谈如 ...
50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

一个高度不固定的div，里面的文字如何垂直居中？

一个高度不固定的div，里面的文字如何垂直居中？

一个高度不固定的div，里面的文字如何垂直居中？相关推荐

最新文章

热门文章