将内容居中对齐 css

Question

我正在尝试创建一个 google 相似的搜索，并且在尝试将内容排列在中心时，我将它们相互叠加。有没有办法让它们以排列的格式逐行排列？

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <style> 
            .center {
 
               height: 100vh;
               position: relative;
    
            } 

           .center > div {
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%) 
                }
         <style>

    </head>
    <body>
        <div class="container">
            <div class="links">
                <a href="googleImageSearch.html">Google Image Search</a>
                <a href="gooleAdvancedSearch.html">Google Advanced Search</a>
            </div>
            <br>
            <div class="center">
                <div class="logo">
                    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" width="272" height="92">
                </div>
                <br>
                <div>
                    <form action="https://google.com/search">
                        <input type="text" name="q">
                        <div class="buttons">
                            <input type="submit" value="Google Search">
                            <input type="button" value="I'm Feeling Lucky">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

我建议你:

.center{
   margin:0 auto;
 }

这应该使您的 div 位于页面中央，如果您想要 div 和页面顶部之间有更多 space 现在我看到你已经嵌套了 div 不同的风格，所以把 margin:0 auto; inside container class 将所有元素居中，并删除相对位置。或在“中心”class 全部删除并用我的代码替换它

Answer 2

尝试使用 flexbox，align-items 和 justify-content 属性将允许您将内容居中对齐。然后你将不得不对其他元素做一些小的调整。

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  width: 100vw;
} 


form {
  diplay: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

input[type="text"] {
  border-radius: 2.5em;
  height: 2em;
  width: 500px;
  border: 1px solid black;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
}

.buttons > * {
  margin-right: 0.85em;
}

将内容居中对齐 css

Align contents at the center with css

html

css

vertical-alignment