Question

如何让这个div停留在页面中间。另外我如何更改div的大小？

HTML：

   <div id="Text">
   <p id="InsideT">
   Hello
   </p>
   </div>

CSS：

 #Text{
  position: absolute;
  width: 50%;
  font-size: 60px;
  text-align: center;
  color: black;
  height: 50%;
  display: inline-block;
  transform: translateY(-50%);
  top: 50%;
  margin: 0 auto;
  color: black;
  right: 320px;
  background: white;

Answer 1

使用绝对定位和变换使div居中。在窗口大小小于div之前，尺寸将无关紧要。

＆＃13;

.centred {
    height: 50px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
}

＆＃13;

<div class="centred">I am in the centre of the page</div>

＆＃13;

Answer 2

你把位置绝对从它的DOM结构中取出了div。我删除它并解决了问题。

<强> HTML：

if (HMODULE hmod = LoadLibraryW(L"wshelper.dll"))
{
    DWORD (WINAPI * InitHelperDll)(_In_ DWORD dwNetshVersion, PVOID pReserved);

    if (*(void**)&InitHelperDll = GetProcAddress(hmod, "InitHelperDll"))
    {
        InitHelperDll(1, 0);// crash here on win10 only
    }
    FreeLibrary(hmod);
}

CSS：

<div id="Text">
   <p id="InsideT">
     Hello
   </p>
</div>

Answer 3

您已经水平<div>与margin: 0 auto水平对齐。自动边距会集中<div>，因为它是 block-level element 。但是，您正在应用许多其他代码段来破坏此对齐，例如position: absolute，right: 320px，top: 50%和transform: translateY(-50%)。

只需margin: 0 auto和text-align: center：

即可实现水平居中

#Text {
  font-size: 60px;
  text-align: center;
  margin: 0 auto;
}

<div id="Text">
  <p id="InsideT">
    Hello
  </p>
</div>

垂直居中稍微复杂一点，使用display: flex，align-items: center和{最简单的方法是使用flexbox实现水平和垂直居中{1}}属性值。请注意，您还需要指定justify-content: center属性：

height

#Text {
  height: 180px;
  border: 5px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

希望这有帮助！：）

Answer 4

你必须设置

position: fixed;

您可以使用

top: ;
bottom: ;
right: ;
left: ;

将其移动并尝试将其居中。即使向下滚动，固定位置也会使div保持原位。

我希望你觉得这很有用。

Answer 5

如果你的意思是页面的实际X，Y中心，这将有效。

#Text{
  font-size: 60px;
  color: black;
  display: inline-block;
  background: white;
  margin: 50%;
}

Answer 6

您必须使用绝对位置将元素定位到页面的中心。在CSS中使用transform属性。见下面的代码：

.centerdiv{
    width: 200px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: 0 auto;
    transform: translate(0, -50%);
    text-align: center;   
}

<div class="centerdiv">centered element</div>

Answer 7

  run: |
    python run_notebook.py --notebook_folder_directory ../samples --notebooks_to_skip **${{env.NOTEBOOKS_SKIP}}**

保持Div为中心

7 个答案: