如何使定义了高度和宽度的< a >里的文字垂直居中【实现代码】

为使定义了高度和宽度的<a>里的文字垂直居中，我们可以使用flex布局来实现。

具体实现：

1. 首先，用CSS样式给<a>元素设置宽度和高度，同时需要设置display:flex;、justify-content:center;和align-items:center;属性值，以实现水平和垂直居中。

a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:50px;
}

1. 接下来，在<a>标签内添加文本，样式类似如下所示。

<a href="#">
  <span>Hello World</span>
</a>

此时，文本"Hello World"就会垂直和水平居中显示在<a>标签内。

示例一：

<a href="#" class="button">
  <span>Submit</span>
</a>

a.button{
    display:flex;
    justify-content:center;
    align-items:center;
    width:120px;
    height:40px;
    background-color:#f7f7f7;
    border-radius:5px;
    border:1px solid #ccc;
    color:#333;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
}

以上代码实现了一个简单的按钮，文本内容为"Submit"，按钮大小为120px*40px，采用灰色背景色和黑色字体颜色。

示例二：

<div id="container">
  <a href="#" class="box">Click here</a>
</div>

#container{
    width:300px;
    height:200px;
    background-color:#eee;
    display:flex;
    justify-content:center;
    align-items:center;
}

a.box{
    width:150px;
    height:100px;
    background-color:#f7f7f7;
    border:1px solid #ccc;
    color:#333;
    text-align:center;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
}

以上代码实现了一个容器，内含一个大小为150px100px的<a>元素，文本内容为"Click here"，容器大小为300px200px，采用灰色背景色和黑色字体颜色。

以上两个示例均使用了flex布局方案，该方案可以实现简单易用的垂直居中效果。如果需要更加复杂的布局方案，则可以考虑使用其他方案如CSS Grid等。