html - 如何在@media 和跨浏览器中水平居中 div 类？

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

您可以使用 flexbox 将 div 的内容居中。试试这个:

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

此外，删除边距 Prop 。

• 解释:margin 属性不起作用，因为 div 的宽度可能是设备宽度的 100%。所以你需要处理内容。 Flexbox 是一个很好的工具。

• 我给您留下有用的链接以了解更多关于 flexbox 的信息和 box-model ，这是这个问题的核心概念。