Question

我希望div垂直和水平居中。但是，当我使用包装器(relative) -->container (absolute)解决方法时，底部的页脚一直被推到屏幕顶部，然后我根本无法移动页脚。那么，如何在不使用绝对定位的情况下垂直和水平对齐棕褐色框？

HTML：

<body>
    <div id="wrapper">
        <div id="container">
            <div id="menu">
                <ul>
                    <?php wp_list_pages('title_li='); ?>
                </ul>
            </div>
            <div id="fullerton" class="clearfix">
                <a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/fullertonmenu.png" /></a>
            </div>
            <div id="logo" >
                <img src="<?php echo get_template_directory_uri(); ?>/images/HB-Logo.png" />
            </div>
            <div id="comingsoon">
                <a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/comingsoon.png" /></a>
            </div>
            <?php endwhile; ?>  
            </div>
        </div>
    <div id="footer"><!-- Footer Content Begins Here -->
        <p>&copy; <?php bloginfo('name'); ?>, by lapetitefrog</p>
    </div>
</body>

CSS：

body {
    text-align: center;
    padding: 0;
    margin: 0 auto;
    background-image: url(images/Wood_Background_3.jpg);
    background-repeat: no-repeat;
    background-color: #20130b;
    max-width: 2048px;
}
#wrapper{
    width: 960px;
    height: 400px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    }
#container {
    left: 50%;
    position: relative;
    top: 50%;
    padding: 20px 0 0 0;
    font-family: Arial, Times, serif;
    background-image: url(images/light_wood.jpg);
    background-repeat: no-repeat;
    overflow: auto;
}
/* ========================================================== Header Styles ======= */

#header {
    height: 50px;
    background-color: #8B0000;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
 } 
}

/* ========================================================== Content Styles ======= */

#content {
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif;
    height: auto;
    overflow: hidden;
}

#content p {
    font-size: 13px;
}

#content h2, h3, h4, h5 {
    color: #d54e21;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

#fullerton{
    float: left;
    width: 180px;
    height: 70px;
    margin: 105px 70px;
    }
#logo{
    float: left;
    width: 320px;
    height: 281px;
    margin: auto;
    }
#comingsoon{
    float:left;
    width: 180px;
    height: 70px;
    margin: 105px 70px;
    }

/* ========================================================== Footer Styles ======= */

#footer {
    width: 100%;
    height: 50px;
    float: left;
    font-family: 'Roboto Slab', serif;
}

#footer p {
    margin: 10px 25px;
    color: #fff;
}

Answer 1

要在不进行绝对定位的情况下水平和垂直居中元素，您可以使用CSS属性：transform，其值translate()与relative定位相结合。

例如，可以像这样移动相对定位的元素：

`transform: translateY(20px);`

这将使您的元素在'Y'轴上向下移动20px。

要将元素垂直居中，我们实际上会进行两次移动。

将元素向下移动父元素高度的一半（或50％）。
将元素向上移动一半（或-50％）它自己的高度。

最终结果是完美居中的元素，无论任何包装或多行文本。 Browser support is IE9+

当.parent {transform-style: preserve-3d;}将元素置于“半像素”时，translate用于阻止元素变得模糊。

进一步阅读zerosizthree.se

.parent { 
  height: 150px; width: 300px; background: #ddd;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; 
}

.center-vertically-and-horizontally {
  background: white; 
  width: 200px;
  position: relative;
  top: 50%;
  left: 50%;

  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

div { border: 2px solid #bbb; padding: 0.5em; }

<div class="parent">
  <div class="center-vertically-and-horizontally">
            Centered both vertically and horizontally within it's parent.</div>
</div>

Answer 2

您可以使用：

.element {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

..用于包装元素

Answer 3

侧面说明：请注意，sudo npm install -g phantomjs-prebuilt --unsafe-perm的父级必须显示为表格（.element）。（显然）父级的高度也必须定义

display: table;

在不使用绝对定位的情况下垂直居中div？

3 个答案: