Question

如何将div中的文本垂直居中，如何将div放在屏幕的宽度上，将其置于顶部？

<div id='custom'>
  textfsdfsdfsdfsdfsd
</div> 

#custom{
 width: 50%;
 background: #FF0000;
 z-index: 99999;
 transform-origin: center center;
 position: absolute; 
 left:50%;
 top: 10px; 
 margin:0 auto;
 height: 52px;
 border-radius:10px;
}

Answer 1

我猜这是你想要的

#custom {
  width: 50%;
  background: #FF0000;
  z-index: 99999;
  transform-origin: center center;
  top: 10px;
  position: absolute;
  margin: 0 auto;
  height: 52px;
  border-radius: 10px;
  /*-----*/
  line-height: 52px;
  left: 0;
  right: 0;
}

<div id='custom'>
  textfsdfsdfsdfsdfsd
</div>

要垂直对齐div中的文字，您应该将div的line-height设置为等于其高度，并水平对齐absolute元素，您应该设置其left使用right

将margin: 0 auto归为零

Answer 2

这对我有用

#custom{
  width: 50%;
  background: #FF0000;
  z-index: 99999;
  transform-origin: center center;
  top: 10px; 
  margin:0 auto;
  height: 52px;
  border-radius:10px;
  text-align: center;
  padding-top: 7%;
}

我删除了位置绝对的东西，div居中。添加了一些填充以使文本垂直居中

在页面顶部水平居中一个div

2 个答案: