Проблема центровки блока

228
25 июня 2019, 06:20

Подскажите, почему на разных пк, блок на сайте отцентрирован по разному? Т.е у меня блок находится по центру, но допустим я делаю скриншот страницы(с помощью различных онлайн сервисов), то там блок находится правее, на ноутбуке тоже самое. Как в таком случае отцентрировать элемент?

#SECTION_1 { 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  height: 700px; 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  column-rule-color: rgb(51, 51, 51); 
  perspective-origin: 676px 624px; 
  transform-origin: 676px 624px; 
  caret-color: rgb(51, 51, 51); 
  background: rgb(14, 17, 37) none repeat scroll 0% 0% / auto padding-box border-box; 
  margin: 0px -20px; 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(51, 51, 51) none 0px; 
  padding: 70px 0px; 
} 
 
 
/*#SECTION_1*/ 
 
#SECTION_1:after { 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  column-rule-color: rgb(51, 51, 51); 
  caret-color: rgb(51, 51, 51); 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(51, 51, 51) none 0px; 
} 
 
 
/*#SECTION_1:after*/ 
 
#SECTION_1:before { 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  column-rule-color: rgb(51, 51, 51); 
  caret-color: rgb(51, 51, 51); 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(51, 51, 51) none 0px; 
} 
 
 
/*#SECTION_1:before*/ 
 
#DIV_2 { 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  height: 1108px; 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  width: 1170px; 
  column-rule-color: rgb(51, 51, 51); 
  perspective-origin: 585px 554px; 
  transform-origin: 585px 554px; 
  caret-color: rgb(51, 51, 51); 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  margin: 0px 9px; 
  outline: rgb(51, 51, 51) none 0px; 
  padding: 0px 350px; 
  margin-top: -60px 
} 
 
 
/*#DIV_2*/ 
 
#DIV_2:after { 
  box-sizing: border-box; 
  clear: both; 
  color: rgb(51, 51, 51); 
  content: '"' '"'; 
  display: table; 
  height: 0px; 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  width: 0px; 
  column-rule-color: rgb(51, 51, 51); 
  perspective-origin: 0px 0px; 
  transform-origin: 0px 0px; 
  caret-color: rgb(51, 51, 51); 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(51, 51, 51) none 0px; 
} 
 
 
/*#DIV_2:after*/ 
 
#DIV_2:before { 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  content: '"' '"'; 
  display: table; 
  height: 0px; 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  width: 0px; 
  column-rule-color: rgb(51, 51, 51); 
  perspective-origin: 0px 0px; 
  transform-origin: 0px 0px; 
  caret-color: rgb(51, 51, 51); 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(51, 51, 51) none 0px; 
} 
 
 
/*#DIV_2:before*/ 
 
#H2_3 { 
  box-sizing: border-box; 
  color: rgb(255, 255, 255); 
  height: 44px; 
  text-align: left; 
  text-decoration: none solid rgb(255, 255, 255); 
  text-size-adjust: 100%; 
  width: 1140px; 
  column-rule-color: rgb(255, 255, 255); 
  perspective-origin: 570px 22px; 
  transform-origin: 570px 22px; 
  caret-color: rgb(255, 255, 255); 
  border: 0px none rgb(255, 255, 255); 
  font: normal normal 700 normal 40px / 44px montserrat, "helvetica neue", Helvetica, Arial, sans-serif; 
  margin: 0px 0px 30px; 
  outline: rgb(255, 255, 255) none 0px; 
} 
 
 
/*#H2_3*/ 
 
#H2_3:after { 
  box-sizing: border-box; 
  color: rgb(255, 255, 255); 
  text-align: left; 
  text-decoration: none solid rgb(255, 255, 255); 
  text-size-adjust: 100%; 
  column-rule-color: rgb(255, 255, 255); 
  caret-color: rgb(255, 255, 255); 
  border: 0px none rgb(255, 255, 255); 
  font: normal normal 700 normal 40px / 44px montserrat, "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(255, 255, 255) none 0px; 
} 
 
 
/*#H2_3:after*/ 
 
#H2_3:before { 
  box-sizing: border-box; 
  color: rgb(255, 255, 255); 
  text-align: left; 
  text-decoration: none solid rgb(255, 255, 255); 
  text-size-adjust: 100%; 
  column-rule-color: rgb(255, 255, 255); 
  caret-color: rgb(255, 255, 255); 
  border: 0px none rgb(255, 255, 255); 
  font: normal normal 700 normal 40px / 44px montserrat, "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(255, 255, 255) none 0px; 
} 
 
 
/*#H2_3:before*/ 
 
#DIV_4 { 
  bottom: 0px; 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  height: 925px; 
  left: 0px; 
  min-height: 600px; 
  position: relative; 
  right: 0px; 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  top: 0px; 
  width: 1220px; 
  column-rule-color: rgb(51, 51, 51); 
  perspective-origin: 610px 462.5px; 
  transform-origin: 610px 462.5px; 
  caret-color: rgb(51, 51, 51); 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  margin: 75px -40px 0px; 
  outline: rgb(51, 51, 51) none 0px; 
  overflow: hidden; 
} 
 
 
/*#DIV_4*/ 
 
#DIV_4:after { 
  bottom: 0px; 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  content: '""'; 
  display: none; 
  height: 20%; 
  left: 0px; 
  position: absolute; 
  right: 0px; 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  width: 100%; 
  z-index: 1; 
  column-rule-color: rgb(51, 51, 51); 
  caret-color: rgb(51, 51, 51); 
  background: rgba(0, 0, 0, 0) linear-gradient(rgba(0, 43, 75, 0) 0%, rgb(0, 43, 75) 100%) repeat scroll 0% 0% / auto padding-box border-box; 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(51, 51, 51) none 0px; 
} 
 
 
/*#DIV_4:after*/ 
 
#DIV_4:before { 
  box-sizing: border-box; 
  color: rgb(51, 51, 51); 
  text-decoration: none solid rgb(51, 51, 51); 
  text-size-adjust: 100%; 
  column-rule-color: rgb(51, 51, 51); 
  caret-color: rgb(51, 51, 51); 
  border: 0px none rgb(51, 51, 51); 
  font: normal normal 400 normal 14px / 20px "roboto slab", "helvetica neue", Helvetica, Arial, sans-serif; 
  outline: rgb(51, 51, 51) none 0px; 
} 
 
 
/*#DIV_4:before*/
<section id="SECTION_1"> 
  <div id="DIV_2"> 
 
    <h2 id="H2_3"> 
      Roadmap 
    </h2> 
 
    <div id="DIV_4"> 
      <div id="DIV_5"> 
        <div id="DIV_6"> 
          <div id="DIV_7"> 
            <span id="SPAN_8">Q1 2018</span> <span id="SPAN_9"></span> 
          </div> 
          <div id="DIV_10"> 
            <img src="img/check.svg" alt="" id="IMG_11" /> 
          </div> 
          <div id="DIV_12"> 
            <span id="SPAN_13">Establish first Crypto-Mine</span> 
          </div> 
          <div id="DIV_14"> 
            <svg id="svg_15"> 
                            <use id="use_16"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
        <div id="DIV_17"> 
          <div id="DIV_18"> 
            <span id="SPAN_19">Q2/Q3 2018</span> <span id="SPAN_20"></span> 
          </div> 
          <div id="DIV_21"> 
            <img src="img/check.svg" alt="" id="IMG_22" /> 
          </div> 
          <div id="DIV_23"> 
            <span id="SPAN_24">Launch Ponos-Mining Platform.<br>First dividend payouts.</span> 
          </div> 
          <div id="DIV_25"> 
            <svg id="svg_26"> 
                            <use id="use_27"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
        <div id="DIV_28"> 
          <div id="DIV_29"> 
            <span id="SPAN_30">Q3/Q4 2018</span> <span id="SPAN_31"></span> 
          </div> 
          <div id="DIV_32"> 
            <img src="img/check.svg" alt="" id="IMG_33" /> 
          </div> 
          <div id="DIV_34"> 
            <span id="SPAN_36">Launch Wallet platform, Vidulum.<br> 
 
 
 
Expand total mining capacity by 25%.</span> 
          </div> 
          <div id="DIV_37"> 
            <svg id="svg_38"> 
                            <use id="use_39"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
        <div id="DIV_40"> 
          <div id="DIV_41"> 
            <span id="SPAN_42">Q2/Q3 2019</span> <span id="SPAN_43"></span> 
          </div> 
          <div id="DIV_44"> 
            <img src="img/check.svg" alt="" id="IMG_45" /> 
          </div> 
          <div id="DIV_46" style="width:300px; margin-left:-64px"> 
            Expand total mining capacity<br> by 50% from inception. 
 
 
          </div> 
          <div id="DIV_47"> 
            <svg id="svg_48"> 
                            <use id="use_49"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
        <div id="DIV_50"> 
          <div id="DIV_51"> 
            <span id="SPAN_52">Q3/Q4 2019</span> <span id="SPAN_53"></span> 
          </div> 
          <div id="DIV_54"> 
            <img src="img/check.svg" alt="" id="IMG_55" /> 
          </div> 
          <div id="DIV_56"> 
            <span id="SPAN_58">Double mining capacity from inception.<br> 
 
 
 
Launch marketplace platform, OneMarketStreet 
                          </span> 
          </div> 
          <div id="DIV_59"> 
            <svg id="svg_60"> 
                            <use id="use_61"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
        <div id="DIV_62" style="margin-left:420px"> 
          <div id="DIV_63"> 
            <span id="SPAN_64" style="margin-top:-280px">Q2 2020</span> <span id="SPAN_65"></span> 
          </div> 
          <div id="DIV_66"> 
            <img src="img/check.svg" alt="" id="IMG_67" /> 
          </div> 
          <div id="DIV_68" style="width:300px; left:-50px">Triple mining capacity from inception. 
          </div> 
          <div id="DIV_69"> 
            <svg id="svg_70"> 
                            <use id="use_71"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
        <div id="DIV_72"> 
          <div id="DIV_73"> 
            <span id="SPAN_74" style="margin-top:-280px; margin-left:434px">Q3 2020</span> <span id="SPAN_75" style="margin-left:500px"></span> 
          </div> 
          <div id="DIV_76" style="margin-left:515px"> 
            <img src="img/check.svg" alt="" id="IMG_77" /> 
          </div> 
          <div id="DIV_78" style="margin-left:434px"> 
            Establish VRTM's fungibility. 
          </div> 
          <div id="DIV_79"> 
            <svg id="svg_80"> 
                            <use id="use_81"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
        <div id="DIV_82"> 
          <div id="DIV_83"> 
            <span id="SPAN_84" style="margin-top:-280px; margin-left:434px">FUTURE</span> 
          </div> 
          <div id="DIV_86" style="margin-left:515px"> 
            <img src="img/check.svg" alt="" id="IMG_87" /> 
          </div> 
          <div id="DIV_88"> 
 
          </div> 
          <div id="DIV_91"> 
            <svg id="svg_92"> 
                            <use id="use_93"> 
                            </use> 
                        </svg> 
          </div> 
        </div> 
 
 
 
 
 
 
 
 
 
      </div> 
      <div id="DIV_240"> 
        <div id="DIV_241"> 
        </div> 
      </div> 
    </div> 
 
  </div> 
</section>

Answer 1

Если сложно добавить код HTML и стили к вопросу, то ответ такой:

.square { 
  width: 20px; 
  height: 20px; 
  background: red; 
} 
 
.square.-middle { 
  margin: 0 auto; 
} 
 
@supports (display: -webkit-box) or (display: -moz-box) or (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { 
  .square.-middle { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
  } 
}
<div class="square -middle"></div>

Но в отсутствии кода в вопросе, так же не исключены факты что родительский блок не на всю ширину экрана и данный блок центрируется относительно максимальной ширины родителя

Answer 2

Для #DIV_2 задайте margin: -60px auto 0;. Свойство auto отцентрует ваш блок. И уберите все transform чтобы не было скролла горизонтального.

Answer 3

Попробуй родителю задать

.block { 
    display: flex;
    justify-content: center;
    align-items: center;
}
READ ALSO
JQuery validate | submitHandler
jQuery

JQuery validate | submitHandler

Есть некая форма, которая проверяется jquery Validate, но дело в том, что отправка происходит только по второму кликуНасколько понимаю по первому...

 199
Две кнопки на сайте
jQuery

Две кнопки на сайте

Все доброе время суток Возник такой вопрос - на сайте есть кнопка

 178
Как исправить ошибку в POST запросе
c#

Как исправить ошибку в POST запросе

Хочу передать данные пост запросом к steam, но в ответ получаю ошибку, помогите разобраться:

 201
Как изменить Namespace для параметра метода
c#

Как изменить Namespace для параметра метода

Есть SOAP сервис на C#, который копирует не мой сервис(тоже на C#), но должен ему соответствовать 1 в 1В одном из методов исходного сервиса присутствует...

 173