![Palatino]( "Palatino")
本文介绍了css div将多行文本垂直和水平地与背景图像进行中心对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 看起来垂直居中和水平居中在div上很难。 我使用这个CSS： .title { font-family：书籍Antiqua，Palatino Linotype，Palatino，serif; font-size：400％; } .subtitle { font-family：Book Antiqua，Palatino Linotype，Palatino，serif; font-size：150％; } .subnote { font-family：Book Antiqua，Palatino Linotype，Palatino，serif; font-size：75％; } .outer { display：table; 位置：绝对; 身高：100％; 宽度：100％; } .middle { display：table-cell; vertical-align：middle; } .innie { width：1000px; height：515px; background-image：url（bkgrnd3.png）; 位置：绝对; 剩下：50％; top：50％; margin：-257px 0 0 -500px; text-align：center; } 和这个html： <！DOCTYPE html> < html> < head> < title>蒂莫西·埃尔登官方< / title> < meta charset =UTF-8> < meta name =viewportcontent =width = device-width，initial-scale = 1.0> < link rel =stylesheettype =text / csshref =eldon.css> < / head> < body> < div class =outer> < div class =middle> < div class =innie> < span class =title> Timothy Eldon < / span> < br /> < span class =subtitle> 作者< / span> < br /> < span class =subnote> （业余）< / span> < / div> < / div> < / div> < / body> < / html> 它将页面中的所有内容放在相对位置，但我无法将文本垂直居中。 似乎有很多想法，但我已经尝试了几个，但没有任何工作。 解决方案你有一些不必要的CSS，比如 margin：-257px 0 0 -500px;左：50％; top：50％;宽度：1000px;身高：515px; 在 .innie 上，这会抛弃您的中心对齐。 我认为这一点，你要做什么。 已更新 .title { font-family：Book Antiqua，Palatino Linotype ，Palatino，serif; font-size：400％; } .subtitle { font-family：Book Antiqua，Palatino Linotype，Palatino，serif; font-size：150％; } .subnote { font-family：Book Antiqua，Palatino Linotype，Palatino，serif; font-size：75％; } .outer { display：table; 位置：绝对; 身高：100％; 宽度：100％; background：url（'https://placeimg.com/600/300/any'）no-repeat; background-position：center; } .middle { display：table-cell; vertical-align：middle; } .innie { text-align：center; } jsFiddle演示 - https://jsfiddle.net/8dphnor5/ I have searched Stackoverflow and cannot find a solution that works.Seems that centring vertically AND horizontally in a div is hard.I'm using this css:.title { font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif; font-size: 400%;}.subtitle { font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif; font-size: 150%;}.subnote { font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif; font-size: 75%;}.outer { display: table; position: absolute; height: 100%; width: 100%;}.middle { display: table-cell; vertical-align: middle;}.innie { width: 1000px; height: 515px; background-image: url("bkgrnd3.png"); position:absolute; left:50%; top:50%; margin: -257px 0 0 -500px; text-align: center;}and this html:<!DOCTYPE html><html> <head> <title>Timothy Eldon Official</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="eldon.css"> </head> <body> <div class="outer"> <div class="middle"> <div class="innie"> <span class="title"> Timothy Eldon </span> <br/> <span class="subtitle"> Author </span> <br/> <span class="subnote"> (amateur) </span> </div> </div> </div> </body></html>It centres everything on the page relatively, but I cannot get the text centred vertically.There seems to be lots of ideas, but I've tried several and nothing works. 解决方案 You have some unnecessary css such as margin: -257px 0 0 -500px; left:50%; top:50%; width: 1000px; height: 515px; on .innie , which is throwing off your center alignment.I think this, what you are going for.UPDATEDCSS.title { font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif; font-size: 400%;}.subtitle { font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif; font-size: 150%;}.subnote { font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif; font-size: 75%;}.outer { display: table; position: absolute; height: 100%; width: 100%; background:url('https://placeimg.com/600/300/any')no-repeat; background-position: center;}.middle { display: table-cell; vertical-align: middle;}.innie { text-align: center;}jsFiddle Demo - https://jsfiddle.net/8dphnor5/ 这篇关于css div将多行文本垂直和水平地与背景图像进行中心对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 阿里云证书，YYDS！ 05-24 18:03