CSS如何在Ionic中居中一个项目答案

【问题标题】：CSS How to center an item in IonicCSS如何在Ionic中居中一个项目
【发布时间】：2017-10-29 13:14:34
【问题描述】：

我正在使用 Ionic3，并且有以下内容：

我想将离子卡居中对齐。

html

  <div class="contracted-content">

  <ion-card class="job-card">

    ...

  </ion-card>

  <div class="person-job">
    <ion-row>

      ...

    </ion-row>
  </div>

 </div>

scss

.contracted-content {
    max-width: 369px;
    align-content: center;    
}

如您所见，我将最大宽度设置为 369px，这样图像就不会变形。现在，当浏览器宽度增加到超过 369 像素时，我想将 div 居中（align-content: center; 没有影响）。

任何建议表示赞赏。

【问题讨论】：

你试过“margin: 0 auto;” ?
感谢margin: 0 auto; 工作！

标签： html css ionic-framework sass

【解决方案1】：

尝试使用margin: 0 auto; 使元素居中

【讨论】：

【解决方案2】：

试试这个：

DEMO HERE

CSS

.align-center{
display: inline-block;
position: relative;
left: 50%;
webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

HTML

<ion-card class="job-card align-center">
 ...
</ion-card>

【讨论】：

谢谢，但是当我尝试translateX(-50%); 时，它似乎将卡片的一半推离了页面的左侧。
我在上面的建议中尝试了margin: 0 auto;，它确实有效。
@Richard 您需要设置相对位置（请参阅我的演示），但如果其他解决方案适合您，请使用其他解决方案 :)
谢谢，我要去margin: 0 auto;