Question

我想在完美的中心展示<div class="fe"></div>。当我使用left: 50%;时它的作品却没有显示在完美的中心。

.fe {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 150px;
  height: 50px;
  background-color: black;
}

Answer 1

方法1：

添加transform: translateX(-50%)。

＆＃13;

body {
  background: #ccc;
}
.fe {
  transform: translateX(-50%);
  background-color: black;
  position: fixed;
  width: 150px;
  height: 50px;
  bottom: 0;
  left: 50%;
}

＆＃13;

<div class="fe"></div>

＆＃13;

方法2：

使用负边距等于元素宽度的一半。即，width .fe为150px，请使用margin-left: -75px

＆＃13;

body {
  background: #ccc;
}
.fe {
  background-color: black;
  margin-left: -75px;
  position: fixed;
  width: 150px;
  height: 50px;
  bottom: 0;
  left: 50%;
}

＆＃13;

<div class="fe"></div>

＆＃13;

Answer 2

你可以将元素翻译成50％左右自己的大小：

transform:translateX(-50%);

像这样：

.fe {
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform:translateX(-50%);
  width: 150px;
  height: 50px;
  background-color: black;
}

Answer 3

而不是将左设置为50％，设置left = 0和right = 0并且margin = auto ..这将自动居中到中心。

.fe {
position: fixed;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
width: 150px;
height: 50px;
background-color: black;
}

Answer 4

尝试使用margin-left和margin-right，如下所示

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

将这两者设置为auto将使分部居中。有关这方面的更多信息，请参阅this tutorial。

Answer 5

你可以使用property align =＆＃34; center＆＃34;为div

 .fe{ align="center"
    }

或者在div中你可以定义

<div class="fe" align="center"></div>

Answer 6

尝试将transform: translateX(-50%);属性添加到您的代码

.fe {
position: fixed;
bottom: 0px;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
transform: translateX(-50%);
margin:auto;
}

如何在中心底部显示固定元素

6 个答案: