Question

我有一些元素，div或任何有id的东西，我想把它放在网页上。但是当它在电脑屏幕上看起来不错时，它在移动设备上看起来很糟糕如何正确地使用任何框架（如bootstrap或其他东西），或者没有任何方法，jquery也是可能的。它在所有移动设备和所有计算机浏览器上看起来都很好。感谢。

Answer 1

我会给你一个绝对中心（水平和垂直）位置的另一个解决方案，它永远不会失败并适用于我测试的每个浏览器（即8 +）。

您拥有 HTML

<div id="centered">
   <!-- Place your content here -->
</div>

以下是绝对中心的 CSS （水平和垂直）：

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

以下是您只想要垂直：

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  right:0;
  left:0;
  margin:auto;
}

只有横向：

#centered{
  width: 500px;
  height: 500px;
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}

Answer 2

很简单。的 HTML

<div id="container"> <div id="content"> Your content here. It can be text, image or anything. </div> </div>

<强> CSS

#container{ width:auto; height: auto; } #content{ width:90% height:90%; margin:auto; }

注意： margin auto实际上以对齐为中心，有时它取决于场景。有固定高度和宽度的地方，更容易。古德纳克

提示如果你想看到对齐方式，你应该在设计过程中在CSS中使用#selector{border:solid};然后你可以删除它..

Answer 3

试试这个：

<div class="center">
 <p>.........content...........</p>
</div>

现在CSS：

.center{
 margin:0 auto; 
 width:500px; /*adjust your width*/
}

Answer 4

CSS

 .flexme{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    }

HTML

 <div class = 'flexme' style = 'position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

查看http://css-tricks.com/snippets/css/a-guide-to-flexbox/

第一个div占据整个屏幕并有一个显示：为每个浏览器设置flex。第二个div（居中的div）利用了display：flex div，其中margin：auto工作得很好。

注意 IE11 +（IE10带前缀）

如何在所有浏览器和设备的网页上集中某些元素？

4 个答案: