Question

我想让ID为“all”的元素集中在整个网站上。我的代码中有什么问题吗？它无法正常工作

#all{
  position: absolute;
  width: 55%;
  margin: 0 auto;
  top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EEEEEE;
  box-shadow: 5px 5px 5px #808080;
}

Answer 1

使用left: 50%; transform: translateX(-50%);水平居中绝对定位的元素。

＆＃13;

#all{
  position: absolute;
  width: 55%;
  top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #EEEEEE;
  box-shadow: 5px 5px 5px #808080;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<div id="all">all</div>

＆＃13;

Answer 2

尝试编码如下

#all{
    position: absolute;
    width: 55%;
    top: 150px;
    left: 50%;
    margin-left:-27.5%;
    background-color: #EEEEEE;
    box-shadow: 5px 5px 5px #808080;
}

Answer 3

我会将它用于2d平移以在所有屏幕尺寸中垂直对齐，如下所示：

.myClass {
   position:fixed;
   width: 55%; // or what ever fixed or precentage value
   top: 50%;
   left: 50%;
   // height: 150px; // if height is known 
   // margin-top: -75px; // if height is known - minus half the height
   transform: translate(-50%, -50%); // if height is unknown
}

如何在网站上集中元素？

3 个答案: