Question

我是CSS，HTML的新手，我正在为叔叔的餐厅设计一个网站。我在Adobe XD中设计了我的第一个原型。然后我找到了一个名为Avocode的网站。我从那里使用css代码。

.logo {
  position: absolute;
  top: 872px;
  left: 57px;
  width: 284px;
  height: 193px;
  z-index: +1;
}

然后我在html文档中使用了代码。

<div class="logo"><img src="logo.png" alt=""></div>

效果很好，但我无法将网站居中。我该怎么办？

Answer 1

使整个网站居中的一种普遍接受的方法是使用margin: auto;方法。

.content {
    width: 75%; /* Could be anything, but 75% works here. */
    margin: auto; /* This is what center the content div itself. */
    border: 1px solid red;
 }
 
 p {
     text-align: center; /* This will center the text inside the paragraph tag */
     border: 1px solid black;
 }

<html>
<head>
</head>
<body>
    <div class="content">
         <p>Here is some content!</p>
    </div>
</body>
</html>

目标是将所有内容包装到一个div中，然后将该div居中。这将使您仍然可以在该div中操纵对象的样式，但是总体上整个文档将居中。

Answer 2

对我来说，我真的很喜欢在项目中使用CSS Grid。

如果您想使用CSS网格，则可以将这样的内容居中：

#element{
    display: grid;
    justify-content: center; /* horizontal centering */
    align-content: center; /* vertical centering */
}

在一个示例中，它看起来像这样。

.logo {
  display: grid;
  justify-content: center;
  align-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="logo">
    <img src="http://placekitten.com/300/300" alt="">
  </div>
</body>

</html>

Answer 3

您可以轻松地将元素居中

CSS Flexbox

.container {
  height: 100vh;
  width: 100%;
  background-color: orangered;

  /* actually you need just these 3 properties specified below, the rest are for demo purposes */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container > p {
  padding: 1rem;
  background-color: #f7f7f7;
}

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container">
  <p>This is a paragraph, that will be centered</p>
</div>

CSS网格

.container {
  height: 100vh;
  width: 100%;
  background-color: yellowgreen;
  
  /* These 3 properties will suffice */
  display: grid;
  justify-content: center;
  align-content: center;
}

.container > p {
  background-color: #f7f7f7;
  padding: 1rem;
}

<div class="container">
  <p>This is a paragraph, that will be centered</p>
</div>

绝对定位

.container {
  height: 100vh;
  width: 100%;
  background-color: turquoise;
      
  /* Only display property will suffice */
  position: relative;
}

.container > p {
  background-color: #f7f7f7;
  padding: 1rem;
  
  /* These 4 properties are needed */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <p>This is a paragraph, that will be centered</p>
</div>

Answer 4

尝试一下，我认为它可以充分满足您的期望。

.logo img {
  position: absolute;
  top: 2%;
  left: 45%;
  width: 100px;
  height: 100px;
  z-index: +1;
}

<div class="logo"><img src="https://i.ibb.co/SQ7YhFZ/tire.png" alt=""></div>

Answer 5

常见的HTML CSS居中元素

<html>
<head></head>
  <body>
    <div class="logo"><img src="logo.png" alt="" /></div>
  </body>
</html>



 **css**

解决方案1：

.logo{
 position:absolute;
 display:inline-block;
 width: 284px;
 height: 193px;
 top:50%;
 left:50%;
 -webkit-transform:traslate(-50%,-50%);
 -ms-transform:traslate(-50%,-50%);
 transform:traslate(-50%,-50%);}

 .logo img{
 position:relative;
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
 margin:auto auto;
 }

**Note:** It will center the div element depending on it's window screen size, when 
ever screen size is been resized the div element will be centered horizontally as 
well as to vertically.

Answer 6

您可以通过以下方式实现此目的：给div一个absolute的位置，然后将div左右移动50％。然后，您只需将div转换为div's高度和宽度的50％，这会将其强制到页面中心。

html：

<div class="logo">
 <img src="logo.png" alt="">
</div>

css：

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

HTML CSS居中整个网站

6 个答案: