垂直和水平将div放在另一个内部

时间:2014-03-31 14:23:35

标签: html css position centering

我试图将div放在另一个div中。 我尝试过以下HTML和CSS

HTML

<div class="header">
 <div class="homeImageText">
    <h1>Document Preparation Like Never Before</h1>
    </div><!--homeImagetext end-->
</div>

CSS

.homeImageText {
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
}

header{
background: url(../images/header1.png) center center no-repeat; ;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Live jsfiddle

1 个答案:

答案 0 :(得分:11)

Demo Fiddle

对于垂直居中,请将包裹div设为display-table,将子display:table-cell设为vertical-align:middle。然后可以使用text-align:center;

简单地完成水平居中

试试CSS:

.header {
    height: 600px;
    display:table;
    width:100%;
}
.homeImageText {
    height:100%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}