为何CSS的top与text-align属性对PHP输出元素不生效？

先给你拆解一下导致top和text-align失效的核心原因，再一步步帮你修正：

核心问题1：PHP输出的元素位置完全错误 #

你把require_once('phpsearchcode.php')放在了<head>标签里，但PHP执行后输出的<div class='results'>是页面内容元素，按照HTML规范，<head>里只能放元数据（样式、脚本、标题这类），不能放<div>这类主体内容。浏览器会自动修正这个错误，但修正后的元素布局上下文会彻底混乱，直接导致依赖正常文档流的CSS属性失效。

核心问题2：top:55%无计算依据 #

position: relative的top百分比是相对于父元素的高度计算的，你的html, body没有设置height:100%，就算元素位置正确，55%也没有参考高度，自然不会生效。

核心问题3：text-align被废弃标签干扰 #

你在PHP代码里给内容套了<center>标签（这个标签已经被HTML5废弃），虽然它会强制内容居中，但会干扰CSS的text-align属性，而且和你的CSS声明冲突。

具体修正步骤 #

1. 把PHP结果输出移到正确位置 #

将require_once从<head>移到<body>里表单下方的位置，也就是你想显示搜索结果的地方：

<body>
    <center>
        <img src="rs.png" id="logo"/><br />
        <form action="search.php" method="post">
            <input type="text" name="search" id="bug">
            <input type="submit" name="submit" value="search" id="rat">
        </form>
        <!-- 搜索结果放在这里 -->
        <?php require_once('phpsearchcode.php'); ?>
    </center>
</body>

2. 修正PHP代码，移除废弃标签 #

删掉<center>标签，改用CSS控制居中：

<?php 
$connection = @mysqli_connect("localhost","root","","R"); 
if($connection->connect_error){
    die("Connection failed: " . $connection->connect_error); 
} 
// 这里要注意：原代码有SQL注入风险，后面会给你修正
$sql="SELECT username FROM userinfo WHERE username LIKE '%" . $_POST['search'] . "%';"; 
$res=$connection->query($sql); 
while($row=$res->fetch_assoc()){
    echo "<div class='results'>Username: " . $row['username'] . "</div>"; 
} 
mysqli_close($connection); 
?>

3. 调整CSS，让属性正常生效 #

给html, body添加高度，确保top:55%有计算依据，同时优化样式写法：

html,body {
    background-color: #282C35;
    color: white;
    margin: 0px;
    height: 100%; /* 新增：让body占满视口高度 */
}
.results {
    position: relative;
    top: 55%;
    margin: 0 auto; /* 水平居中，代替废弃的<center> */
    background-color: #36393E;
    width: 20%;
    text-align: center;
    padding: 10px 0 30px; /* 简化padding写法 */
}

4. 紧急修复SQL注入漏洞！ #

你的原PHP代码直接把$_POST['search']拼进SQL语句里，这是严重的安全漏洞，黑客可以轻松篡改你的数据库。改用预处理语句修复：

<?php 
$connection = mysqli_connect("localhost","root","","R");
if(mysqli_connect_error()){
    die("Connection failed: " . mysqli_connect_error());
}
// 使用预处理语句防止SQL注入
$sql = "SELECT username FROM userinfo WHERE username LIKE ?;";
$stmt = mysqli_prepare($connection, $sql);
$searchTerm = "%" . $_POST['search'] . "%";
mysqli_stmt_bind_param($stmt, "s", $searchTerm);
mysqli_stmt_execute($stmt);
$res = mysqli_stmt_get_result($stmt);
while($row = mysqli_fetch_assoc($res)){
    echo "<div class='results'>Username: " . $row['username'] . "</div>";
}
mysqli_close($connection);
?>

内容的提问来源于stack exchange，提问作者yebulosij