Как горизонтально центрировать классы div в @media и в разных браузерах?

Question

У меня есть несколько классов div, которые я бы хотел центрировать в @media.Попробовал следующее, с и без margin-left.Одним из них является анимация, которая, кажется, ведет себя странно при перемещении или настройке.

Css:

 @media(min-width: 768px) {.wpcf7-form-control.wpcf7-submit {margin: 
 auto !important; margin-left:50% !important;}}

 @media (max-width: 5000px) and (min-width: 768px) 
{.contact::before, 
.contact::after {margin: auto !important; margin-left: 50% 
!important;}} 

@media (max-width: 5000px) and (min-width: 768px) {.wpcf7 
{margin:auto! important; margin-left :50% !important;}}

@media (max-width: 5000px) and (min-width: 768px) 
{#anr_captcha_field_1 {margin: auto !important; margin-left: 50% 
!important;

}}

Я всегда думал, что margin: auto сработает, но, похоже, не работает, даже с important

https://adsler.co.uk/contact-us/

></p>
<p><label> Subject<br />
<span class="wpcf7-form-control- 
wrap your-subject"><input  
type="text" name="your-subject" 
value="" size="40" class="wpcf7- 
form-control wpcf7-text" aria- 
invalid="false" /></span> </label>. 
 </p>
<p><label> Your Message<br />
<span class="wpcf7-form-control- 
wrap your-message"><textarea 
name="your-message" cols="40" 
rows="10" 
class="wpcf7-form-control wpcf7- 
textarea" aria-invalid="false">. 
</textarea></span> </label></p>
<p><div class="anr_captcha_field">. 
<div 
id="anr_captcha_field_1" 
class="anr_captcha_field_div">. 
</div></div><span class="wpcf7- 
form-control-wrap g-recaptcha- 
response"></span></p>
<p><input type="submit" 
value="Send" class="wpcf7-form- 
control wpcf7-submit" /></p>
<div class="wpcf7-response-output 
wpcf7-display-none"></div></form>. 
</div>
</div><!-- .entry-content -->

Answer 1

Вы можете центрировать содержимое div с помощью flexbox.Попробуйте это:

.myClass {
  display: flex;
  justify-content: center;
}

Кроме того, удалите этот реквизит полей.

• Объяснение: пропел полей не работал, потому что, возможно, ширина div была 100% отширина устройства.Так что вам нужно обрабатывать контент.Flexbox - отличный инструмент для этого.

• Я оставляю вам полезные ссылки, чтобы узнать больше о flexbox и box-model , то естьосновная концепция по этому вопросу.