我有一個元素無論是一行還是兩行，如何在固定高度內垂直居中文本？
<p><a href="">TITLE HERE</a></p>
我希望有一個固定的高度，說100px的和紫色的背景色。我希望其中的文字在背景中心垂直對齊。內容將在單行文本和多行文本之間改變。
我可以做height:100px; vertical-align: center;但後來如果它是一條線，它不會對齊到整個100px。我可以做line-height: 100px; vertical-align: center，並且文字將垂直對齊，但是如果是多行的話，該框的高度將是必要的兩倍。
我無法更改html來添加額外的東西。這會讓事情變得更容易。我只能改變CSS。
這可能嗎？
使用transform至中心
p {
background-color: purple;
color: white;
height: 100px;
position: relative;
text-align: center;
}
a{
color: white;
text-decoration: none;
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
<a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, molestiae.</a>
</p>
</body>
</html>使用flexbox
p {
height: 100px;
border: 1px solid black;
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}<p><a href="">TITLE HERE</a></p>
<p><a href="">TITLE<br>HERE</a></p>或者table
p {
height: 100px;
width: 100%;
border: 1px solid black;
display: table;
}
p a {
display: table-cell;
text-align: center; /* horizontal */
vertical-align: middle; /* vertical */
}<p><a href="">TITLE HERE</a></p>
<p><a href="">TITLE<br>HERE</a></p>到垂直對齊未知的行數最好的選擇是通過使用用於子元素display: table;父和display: table-cell; vertical-align: middle;。
這是您的方案的示例實施。
<html>
<head>
<style>
.wrapper {
height: 100px;
width: 300px;
background: purple;
display: table;
}
.wrapper .textcontent {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.wrapper a {
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="textcontent">
<p><a href="">TITLE HERE</a></p>
<p><a href="">Some Other text here</a></p>
</div>
</div>
</body>
</html>
非常完美，非常感謝你 – user3424748
這不會在多行錨標記的情況下工作。所有線將重疊到一個位置，實際上在那個時候只有一條線可見。 – Nitheesh
看這裏https://fiddle.jshell.net/s0drx5wc/ – Nitheesh