![CSS 点击按钮以后修改DIV的高度，代码怎么写？[有代码]](/aiimages/CSS+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE%E4%BB%A5%E5%90%8E%E4%BF%AE%E6%94%B9DIV%E7%9A%84%E9%AB%98%E5%BA%A6%EF%BC%8C%E4%BB%A3%E7%A0%81%E6%80%8E%E4%B9%88%E5%86%99%EF%BC%9F%5B%E6%9C%89%E4%BB%A3%E7%A0%81%5D.png)
当一行文本，必须是一行在一个<div></div>块内部显示时，将该<div></div>块的行高设置为这个块本身的高度，就可以让内部的一行文本垂直居中。
相应的CSS代码如下：
div{
width:1000pxheight:30px
background-color:#ff5857//该属性为背景颜色，主要是让我们能够看到块本身
line-height:30px
}
line-height 属性的取值和 height 属性的取值是相同的，这样内部的一行文本就实现垂直居中。
在CSS中，line-height 属性的调整就是以这条线为标准线的。换句话说，当line-height属性设置为一定的数值时，段落中任意两行的行距就是这两行基线之间的距离。
扩展资料
利用精灵元素实现垂直居中的代码
代码如下：
ghost-center {
position: relative
}
.ghost-center::before {
content: " "
display: inline-block
height: 100%
width: 1%
vertical-align: middle
}
.ghost-center p {
display: inline-block
vertical-align: middle
width: 20rem
}
MARGIN: auto 居中的意思-->标准的写法：margin:0 autoWIDTH: 200px宽度为200px
MAX-WIDTH: 100% !important 最大宽度为100%；也就是说你的整个屏幕的大小或者是上一级区域的整个块儿的大小；!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。
HEIGHT: auto !importantheight:auto，是指根据块内内容自动调节高度。
在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，效果相当于man-width设置最大宽度
css字体上下距离，可以理解是文字的行间距，即控制两行文字垂直距离的。在CSS中，line-height被用来控制行与行之间垂直距离。
不过，行间距与半行间距，还是取决于CSS中的line-height。那么，如何来使用line-height呢？
默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。你可以定义line-height属性来覆盖初始值：p｛line-height:140%｝
你可以有5种方式来定义line-height。
1.line-height可以被定义为：body{line-height:normal}
2.line-height可以被定义为：body{line-height:inherit}
3.line-height可以使用一个百分比的值body{line-height:120%}
4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px}
5.line-height也可以被定义为纯数字， body{line-height:1.2}
缩写line-height
那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：<font-size>/<line-height>
实例：body{font:100%/normal arial} , body{font:100%/120% arial} ,body{font:100%/1.2 arial} ,body{font:100%/25px arial}
视图：line-height设置的几种方式，有些CSS属性是可继承的（inherited），从层叠的元素里传递下来。这样做是为了方便开发者，不再为后代元素重新设值。
1、百分比
2、长度
3、 值：normal
4、纯数字
