Question

我在div中有一个div。

内部的div比其父级宽，所以正常程序

margin-left: auto;
margin-right: auto;

生成一个内部div，其子项的左边缘与父项的左边缘对齐。

当人们回答这个问题时，他们会采用负左边距方法。有更清洁的解决方案吗？

Answer 1

您可以使用flexbox：

＆＃13;

<ion-view view-title="{{route.name}}">
    <ion-content class="padding">

        <h2>{{route.name}}</h2>
        <h2>{{route.desc}}</h2>

        <p>This is the detail page.</p>

    </ion-content>
</ion-view>

＆＃13;

.outer {
  display: flex; /* Magic begins */
  justify-content: center; /* Center contents */
  width: 400px;
  height: 400px;
  background: beige;
  margin: 0 auto;
}
.inner {
  flex-shrink: 0; /* Don't shrink it even if it's too wide */
  width: 600px;
  height: 200px;
  background: pink;
}

＆＃13;

Answer 2

如何在position: absolute;和left:0;right:0;

中使用margin: auto;

此外，您需要将position: relative;放在宽度大于外部元素的父元素上。（在下面的小提琴中，它默认相对于身体）

<强> FIDDLE

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

CSS

.outer
{
    width: 400px;
    height: 400px;
    background: beige;
    margin: 0 auto;

}
.inner
{
    width: 600px;
    height: 200px;
    background: pink;
    position: absolute;
    left:0;right:0;
    margin: auto;
}

Answer 3

我使用变换为绝对元素找到了一种简单的方法。

left: 50%;
transform: translateX(-50%);

如果宽度大于父对象，将居中。

Answer 4

如果内部是图像，我更喜欢这个图像background: url("../img/pic.jpg") no-repeat center center fixed; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover;

Answer 5

访问此网站：http://www.greywyvern.com/?post=323

即使页面比子div窄，也可以工作。

div#context {
  border:1px solid blue;
  width:400px;
  margin:0px auto;
}
div#context div {
  position:relative;
  right:50%;
  text-align:center;
}
div#context div p {
  border:1px solid green;
  width:450px;
  height:50px;
  display:inline-block;
  margin-right:-100%;
}

<div id="context">
  Page centering context
  <div>
<p>
  This is the child element<br />
  which should be centered
</p>
  </div>
</div>

将div设置为比其父级更宽，而不设置负左边距

5 个答案:

CSS