Question

我不是任何CSS专业人士。但是，除了下面提供的ul / li列表以外，margin似乎在其他任何地方都无效。

我曾经和其他分部一起玩过。

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(184, 184, 184);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-image: url('/images/landing.jpg');
    font-family: Montserrat;
}


.header {
    top: 0;
    position: fixed;
    background-color: gray;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.menu {
    position: fixed;
    top: 6px;
    right: 0;
}

.menu ul li {
    display: inline;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: lighter;
    padding: 0 20px;
}

.welcome {
    position: absolute;
    color: white;
    font-size: 50px;
    top: 459px;
    margin: auto;
}

HTML：

  <div class='welcome'>
    <span>Hello!</span>
  </div>

试图让受欢迎的div来到中心

Answer 1

尝试将您的welcome CSS类更改为此：

.welcome {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

Answer 2

您要在绝对定位的元素上设置margin: auto。我想您正在尝试将'welcome'元素居中（根据您的问题，这一事实尚不清楚）。绝对定位的元素取决于其祖先的位置和大小。

如果将绝对定位的元素从其父对象的顶部和左侧移至50％，然后应用将其微移到中心，则可以采用以下方法之一：将绝对定位的元素居中：top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%)。

Answer 3

欢迎课程的位置是绝对的，因此欢迎课程的家长应该相对于欢迎div居中。而且，如果您想使div水平居中，则应将margin: auto;更改为margin: 0 auto;

或者您可以使父div的显示灵活，然后使用align-items, justify-content到center。

.parent { display: flex, align-items: center, justify-content: center }

Answer 4

用此CSS代码替换.welcome CSS类：

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(184, 184, 184);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-image: url('/images/landing.jpg');
    font-family: Montserrat;
}


.header {
    top: 0;
    position: fixed;
    background-color: gray;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.menu {
    position: fixed;
    top: 6px;
    right: 0;
}

.menu ul li {
    display: inline;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: lighter;
    padding: 0 20px;
}

.welcome {
  left:50%; right:50%;
    top:50%; bottom:50%;
  position: absolute;  
}

 <div class='welcome'>
    <span>Hello!</span>
  </div>

保证金不给div的任何结果

4 个答案: