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

Posted 2023-03-05

【中文标题】垂直和水平将 div 居中在另一个内部

【英文标题】：Vertical and Horizontal centering a div inside another

【发布时间】：2014-05-10 22:40:03

【问题描述】：

我试图将一个 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

【问题讨论】：

将position: absolute 添加到.homeImageText 和position: relative 到header

@Mathias 这并没有解决我的问题。

请注意，这不会使 div 本身居中，而是使其与父级大小相同

What's The Best Way of Centering a Div Vertically with CSS的可能重复

How's this?

【参考方案1】：

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;