方法1:使用边缘财产

如果元素不是区块级元素,然后添加显示器:区块属性到它。

#outer { 显示: flex; justify- 内容: 中心; 背景颜色: 银色; } #inner { 背景颜色: #f07878; } <div id="outer"> <div id="inner"> Foo foo</div> </div>

这是一个经典的方法,以中心元素. 设置位置:相对外部元素. 设置内部元素的位置为绝对和左: 50%. 这将推动内部元素从外部元素的中心开始. 现在使用转变属性和设置转变: 翻译X(-50%) 这将使元素的中心水平。

使用 Sass (SCSS合成) 你可以用混合物做到这一点:

与翻译

// Center horizontal mixin
@mixin center-horizontally {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

在HTML标签中:

<div class="center-horizontally">
    I'm centered!
</div>

请记住添加位置:相对;到母 HTML 元素。

与Flexbox

使用Flex,你可以这样做:

@mixin center-horizontally {
  display: flex;
  justify-content: center;
}

// Center horizontal class
.center-horizontally {
    @include center-horizontally;
}

在HTML标签中:

<div class="center-horizontally">
    <div>I'm centered!</div>
</div>

试试这个CodePen!

.outer {
    text-align: center;
    width: 100%
}

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}

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

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

菲德尔