代码之家 › 专栏 › 技术社区 › AbhiRam

如何垂直设置div center[复制]

css html

-1

AbhiRam · 技术社区 · 6 年前

这个问题已经有了答案:

How to vertically center a div for all browsers? 44个答案
Flexbox: center horizontally and vertically 10个答案
How to Vertical align elements in a div? 28个答案
Vertically centering a div inside another div [duplicate] 24个答案

我正在尝试使用下面的代码垂直对齐div元素中心,但它不起作用我已经尝试了很长一段时间,但没有结果可以帮助我请问我在哪里做了堆栈,我如何才能

.center {
    padding: 10px 0;
    border: 3px solid green;
    margin-left:10px;
    margin-right:10px;
  }

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    
    <h2>Center Vertically</h2>
    <p>In this example, we use the padding property to center the div element vertically:</p>
    
    <div class="center">
      <p>I am vertically centered.</p>
      <form action="/action_page.php">
      <fieldset>
        <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname" value="Mickey"><br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse"><br><br>
        <input type="submit" value="Submit">
      </fieldset>
    </form>
    </div>
    
    </body>
    </html>

解决这个问题?

https://www.w3schools.com/code/tryit.asp?filename=FYB6T0NY6DTE

1 回复 | 直到 6 年前

Julian 6 年前

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .center {
      position: relative;
      padding: 10px 0;
      border: 3px solid green;
      top: 50%;
      transform: translateY(-50%);
    }
    </style>
    </head>
    <body>
    
    <h2>Center Vertically</h2>
    <p>In this example, we use the padding property to center the div element vertically:</p>
    
    <div class="center">
      <p>I am vertically centered.</p>
      <form action="/action_page.php">
      <fieldset>
        <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname" value="Mickey"><br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse"><br><br>
        <input type="submit" value="Submit">
      </fieldset>
    </form>
    </div>
    
    </body>
    </html>