Question

如何使用CSS在html的页面中间居中div？

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

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

Answer 1

<强> MARKUP

<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

Answer 2

使用margin : auto将div居中。

HTML：

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

和css：

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

Answer 3

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

将div作为中心的相应CSS将是

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

，或者

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

Answer 4

试试这个;

HTML：

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

CSS

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

在页面中居中div

4 个答案: