Question

我想将div.father放在屏幕的中心，并将div.son放在div.father的中心。

这是我想要的。

如何重写我的css代码以获得结果？

<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<title> boxes</title>
<style type="text/css">

div.father{margin: 0 auto;width:300px;height:300px;border:1px solid black;}
div.son{margin: 0 auto;width:100px;height:100px;border:1px solid black;}
</style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

Answer 1

您可以使用flexbox。使用div（对于垂直对齐）添加到父display: flex justify-content: center和align-items: center（用于水平对齐）：

＆＃13;

div.father {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: flex;/*add this*/
  justify-content: center;/*add this for horizontal align*/
  align-items: center;/*add this for vertical*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.son {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

＆＃13;

<div class="father">
  <div class="son"></div>
</div>

＆＃13;

编辑：对于屏幕中间的水平和垂直对齐，您可以使用本文Centering Percentage Width/Height Elements中描述的技巧。

<强>参考

flex

Answer 2

你可以这样做：

div.father {
	margin: 0 auto;
	width:300px;
	height:300px;
	border:1px solid black;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
div.son {
	margin: 0 auto;
	width:100px;
	height:100px;
	border:1px solid black;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div class="father">
  <div class="son"></div>
</div>

position: absolute将使儿子和父亲失去流动。使用top和left，您可以将项目放置在第一位父级位置absolute/relative/fixed或<body>所需的偏移量上，transform: translate(-50% -50%)将重新定位元素不是从左上角开始，而是在中心。

注意：对于旧版浏览器，您可以在-moz-之前使用-o-，-webkit-，-ms-和transform前缀。

-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

您也可以使用flex达到相同的目标，但如果您想要支持所有IE家庭，请使用polyfil flex。

Answer 3

以下css将使中心成为div。

display:flex和position:absolute可以解决问题 align-items: center;将垂直居中子div，justify-content: center;将水平居中于父级。

＆＃13;

div.father {
    align-items: center;
    border: 1px solid black;
    display: flex;
    height: 300px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

div.son {
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

＆＃13;

<div class="father">
  <div class="son"></div>
</div>

＆＃13;

<强> Working Fiddle

Answer 4

试试这个......

html,body{
    	height: 100%;
    	width: 100%;
    	margin: 0px;
    	padding: 0px;
    	display: flex;
    	align-items: center;
    }
    	
    .parent{
    	border:1px solid;
    	width: 400px;
    	height: 400px;
    	margin: 0 auto;
    	display: flex;
    	align-items: center;
    
    }
    .child{
    	border:1px solid;
    	width: 200px;
    	height: 200px;
    	margin: 0 auto;
    	
    	
    }

<div class="parent">
    <div class="child"></div>
</div>

Answer 5

在div.father类

中添加此属性

<form:form method="post" action="/change-password" modelAttribute="passwordChangeForm">
       <form:label path="password">New password</form:label>
       <form:input path="password"/>
       <form:errors path="password"/>
</form:form>

在div.son类中添加此属性

 div.father{position:relative;}

这将跨浏览器

如何将div放在css的中心？

5 个答案: