如何通过 CSS 媒体查询在移动设备中居中 div 元素答案

【问题标题】：How to center div element in mobile devices by CSS media queries如何通过 CSS 媒体查询在移动设备中居中 div 元素
【发布时间】：2018-03-13 00:41:14
【问题描述】：

我需要将移动设备的 div 元素居中。这是我的网站：http://transporttest.cba.pl/ 在移动设备上，描述 div 向左移动。我尝试使用媒体查询，但它不起作用。我做错了什么？在 PC 上一切正常。这是我的代码片段：

HTML:
    <div id="opis">
        <h2>
        <p style="line-height: 3cm; ">
        &#9830; Od 1991 roku w branży. <br/>
        &#9830; 9 zestawów (ciągnik+ naczepa firanka, colimulde). <br/>
        &#9830; Uprawnienia ADR u każdego kierowcy.<br/>
        &#9830; Warsztat obsługujący auta ciężarowe.<br/>
        </p>
    </div>

CSS：

#opis
{
    font-size: 25px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #F2F3F7;
    height: auto;
    width:72%;
    display:inline-block;
    text-align:center;
}
#container
{   
    text-align: center;
    width:100%;
}

@media all and (max-width: 768px) {
    #container{
        wiidth:100%;
    }
    #opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt 
    {
        left:25%;
        top:25%;
        position:absolute;
        width:50%;
        text-align:center;
    }
    #menudol{
        text-align:center;
         display: block;
  margin: 0 auto;
    }
}

@media all and (max-width:640px){
    #container{
        wiidth:100%;
    }
    #opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt 
    {
        width:72%;
        height:auto;
        display:inline-block;
        text-align:center;
    margin: 0 auto;
    }
    #menudol{
        text-align:center;
         display: block;
  margin: 0 auto;
    }

}

【问题讨论】：

标签： html css mobile media-queries mobile-devices

【解决方案1】：

要使媒体查询起作用，您需要包括：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

标签之间。

https://www.w3schools.com/css/css_rwd_viewport.asp

【讨论】：

【解决方案2】：

首先，使用<meta name="viewport" content="width=device-width, initial scale= 1.0">

因为它会自动使您的网页适应设备的宽度。

其次，你应该使用margin-left=auto; margin-right=auto;

如果您的网页位于设备屏幕的中心，这将使内容。

您也可以使用text-align="center" 如果这对你有用。

附： <meta name=viewport> 绝对应该用在网页中，因为它可以帮助设计者自动将网页格式化为屏幕宽度。

【讨论】：