如何使div标签水平居中

如何使div标签水平居中?你可以将以下的css样式引用到div标签中,从而达到水平居中的效果:

#inner {
  width: 50%;
  margin: 0 auto;
}

当然,您不必将设置width50%。任何小于包含宽度的宽度<div>都可以使用。

如果您以Internet Explorer 8(及更高版本)为目标,最好改用以下方法:

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中,并且无需设置特定的即可工作width

水平和垂直。它适用于一些比较现代的浏览器(Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera,等等)。

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

设置widthmargin-left,将和设置margin-rightauto。不过,这仅适用于水平。如果您想同时使用两种方式,则只需同时进行。不要害怕尝试;不要害怕。并不是您会破坏任何东西。

发表评论

电子邮件地址不会被公开。 必填项已用*标注