Блог

Я не какой-либо CSS-профи. Но margin, похоже, не работает ни в каких других частях, кроме списка ul / li, приведенного ниже.

Я играл с позициями и другими divs.

 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 в центр

Вы устанавливаете margin: auto для элемента с абсолютным расположением. Я полагаю, вы пытаетесь центрировать 'welcome' элемент (согласно вашему вопросу, этот факт неясен). Элемент с абсолютным расположением зависит от положения и размера его предшественников.

Одно из многих решений для центрирования элемента с абсолютным расположением, если переместить его на 50% сверху и слева от его родительского элемента, а затем применить translate, чтобы переместить его в центр: top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) .

положение класса приветствия является абсолютным, поэтому родительский класс приветствия должен располагаться относительно центра элемента приветствия. А также, если вы хотите расположить div по центру по горизонтали, вам следует изменить margin: auto; на margin: 0 auto;

Или вы можете настроить отображение родительского div в flex, а затем использовать align-items, justify-content to center .

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

Попробуйте изменить свой welcome класс css на этот:

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

Замените свой .добро пожаловать в класс css с этим 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>