Question

那么如何垂直和水平居中锚标记链接？没有使用div或任何父元素。我只是想把它放在中间，如下图所示。 This is how i want it to look like.

这是我的代码：

<html>
<head>
<style type="text/css">
body{
background:#000;
}
.link{
font-size:40px;
}
</style>
</head>
<body>
<center><a class="link" href="#">BornExplorer</a></center>
</body>
</html>

Answer 1

如果锚标签框的宽度和高度是固定的，那就非常简单了。假设您想要相对于视口定位标记：

html { background: black; color: white; }
.centered {
  /* size */
  width: 10em;
  height: 1em;
  
  /* positioning */
  margin-left: -5em; /* -(width/2) */
  margin-top: -0.5em; /* -(height/2) */
  position: fixed;    /* relative to viewport */
  left: 50%;
  top: 50%;
  
  /* just aesthetic styling */
  text-align: center;
  color: white;
  font-weight: bold;
  background: rgba(255,255,255,0.3);
}

<a class="centered" href="#">Centered</a>

Answer 2

如果您要使用单个链接进行整页设置，可以使用line-height:100vh设置居中，这意味着行高为页面高度的100％。

html,body{width:100%;height:100%;margin:0;}
body{
  background:#000;
  line-height:100vh;
}
.link{
  font-size:40px;
  line-height:1;
  display:inline-block;
}

<center><a class="link" href="#">BornExplorer</a></center>

如何在没有任何div的情况下垂直和水平居中Anchor标签元素？

2 个答案: