常用css的开发人员都知道，让单行文字水平居中用text-align:center，垂直方向居中有一个小技巧是让line-height=height,一般用到这个的时候我们的高度都是固定的px值,但今天我们设置高度为百分比时,也想让文字垂直居中,于是有了下面这段代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
margin: 0;
height: 100%;
}
#container{
width: 100%;
height: 100%;
background: #888888;
}
#content{
width: 50%;
height: 50%;
font-size: 100px;
text-align: center;
background: #0000ff;
}
</style>
</head>
<body>
<div >
<div >
HELLO WORLD
</div>
</div>
</body>
</html>
此时没有设置任何让它垂直居中的样式, 运行如下
然后利用line-height:50%,看看发生什么。
看上面效果，其实并不是我截图截丢了一块,然后发现字体向上移了一部分,原因是line-height的百分比是相对于font-size的,所以你如果使用line-height居中的话,就必须使用绝对的px值。
那么如何解决呢？看以下方法。
方法一:
增加一个父元素,给父元素设置display:table,给需要居中的元素设置vertical-align:middle;display:table-cell;
方法二:
给需要居中的元素加以下代码样式和display:flex;justify-content:center;align-items:center;
两种方法在不同场景都有一定程度的问题,需根据实际情况确定。
小技巧tips:
设置高度宽度百分比时,百分比时相对于父元素来确定,承接父元素的百分比,相对于浏览器屏幕大小时,必须给html,body设置显性百分比100%。
不知大家在开发中是如何解决的呢？或者有更好的方法，欢迎大家留言讨论。
相关推荐
-
iphone内存不够用可以扩容么（iPhone扩容机能买吗）
很多网友觉得iPhone的内存总是不够用，大内存和小内存的价格又差很多，所以可能会考虑价格便宜的扩容机。 什么是扩容机呢？其实就是把小内存的iPhone扩大容量，变成大内存的iPhone，内存变大虽然是好事，但是扩容的...
-
惠普HP-1000系列换硒鼓步骤（惠普HP-1000系列换硒鼓方法）
一、拆开88A型硒鼓包装盒后，首先要将前面的黑色纸条拉出来。 下面这个黑纸条要完全拉出来。 二、将右边黄色手柄带子拉出，一直拉到底，全部出来为止。 下图中，密封带已经拉出来一部分了。 一直到密封条全部拉出来...
-
怎么保养好笔记本电脑（保养笔记本电脑小知识）
对于电脑小白来说，如何更好的保养笔记本电脑？有哪些行为会损耗笔记本电脑寿命？这些基本的电脑常识问题都是需要提前了解的。今天，小编就来告诉大家如何正确地保养电脑~ 1、电池保养 不要在过高或者过低的电流下充...
-
红米手机如何格式化恢复出厂设置（红米手机如何格式化sd卡）
别管账号中间的数字是什么，直接使用手机号码登录，密码不匹配可以再次申请密码重置。重置成功后，再在手机上输入手机号码代替账号，使用重置后的密码进行激活。 红米手机恢复出厂设置方法如下： 方法一： 1、使用手...
-
ios12不越狱改x手势（ios12免越狱改x手势）
由于全面屏的iPhone X系列取消了Home键，因此全面屏iPhone的操作手势也跟以往的iPhone大不相同。有些人会说比起iPhone X手势操作，我更喜欢带有Home键的手势操作，为什么呢？因为我的钱包不允许啊~ 既然钱包不允许，...
-
食用油能带上火车吗（食用油允许带上火车吗）
食用油可以带上火车，但是要做好以下三点：1、随身行李不超重是前提，同时包装要还符合铁路运输；2、食用油要是正规的产品，有详细成分和厂商的说明，不能是三无产品，比如：散装油、散白酒、散牛奶等；3、要以未开...