在页面中居中 div [重复]答案

【问题标题】：Centering a div in the page [duplicate]在页面中居中 div [重复]
【发布时间】：2014-09-30 09:55:07
【问题描述】：

如何使用 CSS 将 div 置于我的页面中间的 html 中？

像 www.google.com 这样的网站，当您访问该网站时，您会看到搜索栏和徽标位于页面中间。

有什么办法可以解决这个问题？

【问题讨论】：

你能做一个小提琴链接吗？因为无法回答你的问题。
你可以看看 www.google.com 的代码，看看他们是怎么做的
一般方式是使用margin:0px auto
@iStimple。那是行不通的。
可能尝试使用 jquery 检查此链接stackoverflow.com/questions/210717/…

标签： html css

【解决方案1】：

标记

<div class="outer"><div class="inner">your content</div></div>

风格

.outer {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: left;
}

DEMO

【讨论】：

【解决方案2】：

<div class = "center_me">Some content</div>

使 div 居中的相应 CSS 将是，

.center_me {
 dislay: table;
 margin: 0px auto;
 }

或者，

.center_me {
 display: table;
 width: 50%;
}

【讨论】：

【解决方案3】：

使用 margin : auto 将 div 居中。

HTML：

<div id="center"></div>

还有css：

#center {
    margin : auto;
    display : inline-block;
}

【讨论】：

【解决方案4】：

试试这个；

HTML：

<div id="element">your element</div>

css

#element {
  width: 200px;
  display: block;
  margin: 0 auto;
}

【讨论】：