Question

我使用以下代码将对象居中：

.object {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left:50%;

  /* these are the lines to which I will refer */
  margin-top: -350px;
  margin-left: -350px;
}

我正在使用margin top和left来减去对象大小的一半，但该大小以百分比形式给出。所以我的问题是有一种方法来分配这些边距所以我不必每次更改框大小时手动更改它们吗？

Answer 1

对我来说，最好的选择是使用transform:translate属性。

 .object {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }

无需再计算width/2和height/2保证金。

如果你正在使用SASS，这里有一个神奇的@mixin：

@mixin transform($transforms) {
   -moz-transform: $transforms;
   -o-transform: $transforms;
   -ms-transform: $transforms;
   -webkit-transform: $transforms;
   transform: $transforms;
}

@mixin center($position: "both") {
  position: absolute;

  @if $position == "vertical" {
    top: 50%;
    @include transform(translateY(-50%));
  }

  @if $position == "horizontal" {
    left: 50%;
    @include transform(translateX(-50%));
  }

  @if $position == "both" {
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
  }
}

然后，只需使用

.object {
   // both vertical and horizontal
   @include center;

   // only vertical
   @include center(vertical);

   // only horizontal
   @include center(horizontal);
}

Answer 2

你应该使用flex。

HTML

<body>
    <div class="square"></div>
</body>

CSS

body{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.square{
  width: 200px;
  height: 200px;
  background-color: red;
}

Answer 3

许多方法之一 - 使用transform属性将元素居中 - 请参阅下面的演示：

.object {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left:50%;
  border: 1px solid red;
  transform:translate(-50%, -50%);
}

<div class="object">Two</div>

Answer 4

.main_div{
  width:200px;
  height:200px;
  border:thin black solid;
  position:relative;
}

.main_div .object {
  width: 70%;
  height: 70%;
  position: absolute;
  transform:translate(-50%, -50%);
  top: 50%;
  left:50%;
  border: thin red solid;
  
}

<div class="main_div">
  <div class="object">Object Div Text</div>
</div>

希望这有帮助。

Answer 5

为什么不使用margin: 0 auto？

.object {
  width: 70%;
  height: 70%;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;
}

https://jsfiddle.net/p9hy06tg/4/

使用CSS更智能地居中div

5 个答案: