如何使用CSS将子div居中对齐父div内？

我是 html 和 css 新手，我不知道如何在父 div 内居中对齐子 div。这是我的代码，请回答并解决我的问题。

CSS

.page {
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}

.window {
float:center;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:auto;
margin-right:auto;
}

* {
padding:0px;
margin:0px;
}

HTML

<div class="page">
<div class="window"><!--  i want to center align this div inside above div  -->
</div>
</div>

首先，没有什么叫float:center;, float只有 3 个有效值，分别是none, left and right.

为了使任何元素居中，您需要定义一些width首先使用margin: auto;将其水平居中。

Demo

使元素居中的另一种方法是使用text-align: center;在父元素上，但这是一种肮脏的方式。

您还可以使用 CSS 定位技术，例如嵌套absolutea 内的元素relative定位元素，然后我们通过使用将其居中left: 50%;然后我们扣除总数的 1/2width元素的使用margin-left: -100px;（总元素width say is 200px）。你也可以center元素垂直。

让元素垂直和水平居中的另一种方法是使用display: table-cell;财产连同vertical-align: middle;

Demo