我想要一個垂直和水平居中的div。然而，當(dāng)我使用包裝器(相對)-& gt；容器(絕對)解決方法，底部的頁腳被推到屏幕的頂部，然后我根本無法移動頁腳。那么，我怎樣才能在不使用絕對定位的情況下使tan框垂直和水平居中呢？
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>© <?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;
}要在沒有絕對定位的情況下使元素水平和垂直居中，可以使用CSS屬性:transform，值為translate()并結(jié)合相對定位。
例如，相對定位的元素可以像這樣移動:
transform: translateY(20px);這將使你的元素在Y軸上下移20px。
為了使你的元素垂直居中，我們實際上做了兩個動作。
將元素向下移動父元素高度的一半(或50%)。 將元素移回其自身高度的一半(或-50%)。 最終結(jié)果是一個完全居中的元素，不管有沒有換行或多行文本。瀏覽器支持是IE9+。
transform-style: preserve-3d屬性用于在translate將元素放在& quot半像素& quot。
div {
border: 2px solid #bbb;
padding: 0.5em;
}
.parent {
height: 150px;
width: 300px;
background: #ddd;
transform-style: preserve-3d;
}
.center-vertically-and-horizontally {
background: white;
width: 200px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="parent">
<div class="center-vertically-and-horizontally">
Centered both vertically and horizontally within it's parent.</div>
</div>您可以使用:
.element {
display:table-cell;
vertical-align:middle;
text-align:center;
}..對于包裝元素
旁注: 請注意。元素必須顯示為表格(display:table；)父母的高度也必須被定義(顯然)
.element-parent {
display: table;
height: 100%;
}
.element {
display:table-cell;
vertical-align:middle;
text-align:center;
}