Question

我有一个运行良好的代码，但是由于某种原因，它们不能完全在中间垂直对齐。我已经尝试过vertical-align：中间代码，但是仍然不能很好地工作。我该如何解决？

我想使div在中间水平对齐，在垂直方向上对齐。当执行检查元素时，某些选项（包括ipad，iphone X和nexus 10）也无法很好地显示，并且项朝左上方浮动。此致。

代码如下：

{{extend 'layout.html'}}

<style type="text/css">html{}.footer{visibility: hidden;}html{::-webkit-scrollbar{display:none;}} </style>
<style type="text/css">
    #container {
      margin: auto;
      width: 1190px;
      padding-top: 40px;
      padding-bottom: 40px;
      text-align: center;
    }

    .box {
      display: block;
      margin: 60px;
      white-space: nowrap;
    }
    .box div {
      display: inline-block;
      margin: 0px;
      padding: 0px;
      width: 33.33%;
      vertical-align:middle;
    }
    .box p {
      position: relative;
      width: 33.33%;
      top: 12px;
      z-index: 2;
      text-align: center;
      font-size: 1.5em;
      left: 15px;
    }
    .clear {
      clear: both;
    }
    .wrapper {
      margin: 0 auto;
      padding: 0 10px;
      width: 1190px;
    }
    .h3{
        font-family: 'Audiowide'
    }


    @media only screen and (max-width: 871px),
            (min-device-width: 320x) and (max-device-width: 1424px){
                #container {
                    margin: auto;
                    width: 87.7%;
                    padding-top: 40px;
                    padding-bottom: 40px;
                    text-align: center;                    
                    }

                .box {
                    display:block;
                    margin: auto;
                    white-space: nowrap;  
                    width: auto;             
                    }
                .box div {
                  display: inline-block;
                  margin: 0px;
                  padding: 0px;
                }
                .box p {
                    position: relative;
                    width: 87.7%;
                    top: 12px;
                    z-index: 2;
                    text-align: center;
                    font-size: 1em;
                    left: 15px;
                    }
                .clear {
                  clear: both;
                }
                .wrapper {
                  margin: 0 auto;
                  padding: 0 10px;
                  width: 100%;
                }


</style>


<body>
    <div id="container">
      <div class="wrapper">
        <h3 >Navigate from here...</h3>
      </div>

      <div class="box">
        <div>
            {{=A('Policy', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('default','privacy'))}}
            <p>Policy Terms</p>
        </div>
        <div>
            {{=A('Policy', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('default','privacy'))}}
            <p>Policy Terms</p>
        </div>
        <div>
            {{=A('Policy', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('default','privacy'))}}
            <p>Policy Terms</p>          
        </div>
      </div>
      <div class="box">
        <div>
            {{=A('Services', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('dext','predexty'))}}
            <p>Track Services</p>
        </div>
        <div>
            {{=A('Services', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('dext','predexty'))}}
            <p>Track Services</p>
        </div>
        <div>
            {{=A('Services', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('dext','predexty'))}}
            <p>Track Services</p>          
        </div>
      </div>

      <div class="clear"></div>
    </div>

</body>

Answer 1

   <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>h1 {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}</style>
</head>
<body>

<h1>This is a Heading</h1>


</body>
</html>


Try this CSS this will help

Answer 2

.vertical-horizontal-centered{
    display: flex;
    align-items: center;
    justify-content: center;
}

尝试一下。它的所有子级都将垂直和水平居中。

如何垂直和水平对齐DIV

2 个答案: