水平/垂直对齐下的 CSS 文本答案

【问题标题】：CSS text under horizontal/vertical alignment水平/垂直对齐下的 CSS 文本
【发布时间】：2016-05-10 04:22:47
【问题描述】：

所以，我有一个页面，其中包含水平和垂直居中的文本。我想要做的是将普通文本放在该居中文本下。到目前为止，这是我的代码。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title>Block4o</title>
</head>

<body scroll="no" style="overflow: hidden">

<h1>Block4o</h1>                         
Normal text should be here (links etc.)
</body>
</html>

<style>
body 
{
	background-image: url("/background.jpg");
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-position:center;
}

h1 
{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border:solid;
	border-size: 8px;
	border-radius: 10px;
}

</style>

这是我在视觉上需要的一个例子。任何帮助表示赞赏。

【问题讨论】：

标签： css alignment

【解决方案1】：

这样的？

.main{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

h1{
  border:solid;
	border-size: 8px;
	border-radius: 10px;
}

<div class="main">
  <h1>Block4o</h1>    
  Normal text should be here (links etc.)
</div>

【讨论】：

【解决方案2】：

希望对你有帮助：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title>Block4o</title>
<style>
    body {
        background-image: url("/background.jpg");
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center;
    }

    h1 {
        text-align: center;
        border: solid;
        border-size: 8px;
        border-radius: 10px;
    }

    div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body scroll="no" style="overflow: hidden">

<div>
    <h1>Block4o</h1>
    Normal text should be here (links etc.)
</div>

</body>
</html>

【讨论】：