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

Question

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

我希望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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

bob*_*bob 7

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

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

`transform: translateY(20px);`

Run Code Online (Sandbox Code Playgroud)

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

要将元素垂直放置,我们实际上会进行两次移动.

将元素向下移动父元素高度的一半(或50%).
将元素向上移动一半(或-50%)它自己的高度.

无论任何包装或多行文本,最终结果都是完美居中的元素.浏览器支持是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; }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，4 月前
查看次数：	10260 次
最近记录：	6 年，1 月前