width值不为固定数值时，如何设置块级元素垂直水平居中
# 具体遇到的问题
width值不为固定数值时，如何设置块级元素垂直水平居中
目标居中块级元素为contentLayer, 父元素为banner. 尝试了position:absolute+margin:auto以及vertical-align、text-align等多个方式均无效，不知道是哪里设置有问题
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
css代码
*{
margin:0;
padding:0;
list-style:none;
}
.top{
position:fixed;
width:100%;
height:80px;
overflow:hidden;
background:#07cbc9;
}
.top .logo{
float:left;
}
.top .logo a img{
vertical-align: middle;
margin-top:12px;
margin-left:85px;
}
.top .logo a{
text-decoration: none;
}
.top .nav{
float:right;
margin-right:65px;
}
.top .nav ul li{
margin-left:30px;
float:left;
line-height:80px;
}
.top .nav ul li a{
text-decoration: none;
color:white;
}
.top .nav ul li a:hover{
background:#78dddb;
}
.banner{
width:100%;
height:500px;
}
.banner .content{
width:100%;
height:500px;
}
.banner .contentLayer{
width:800px;
height:500px;
}
.banner .contentLayer .con{
border-width: 2px;
border-color:rgb(132, 134, 136);
border-style:solid;
width:505px;
margin-top:23px;
background:none;
}
.banner .contentLayer .con.name,
.banner .contentLayer .con.phone,
.banner .contentLayer .con.email{
height:39px;
}
.banner .contentLayer .con.comment{
height:115px;
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="hm2.css">
</head>
<body>
<div class="top">
<div class="logo">
<a href="#"><img src="images/logo.png"/></a>
</div>
<div class="nav">
<ul>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
<li><a href="#">aa</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="content">
<img src="images/banner3.jpg"/>
</div>
<div class="contentLayer">
<input type="text" name="name" placeholder="aa" class="con name"/><br/>
<input type="text" name="phone" placeholder="aa" class="con phone"/><br/>
<input type="text" name="email" placeholder="aa" class="con email"/><br/>
<input type="text" name="comment" placeholder="aa" class="con comment"/><br/>
<input type="button" name="submit" placeholder="aa" class="submit" /><br/>
</div>
</div>
<div class="about">
<div class="top1"></div>
<div class="middle">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="bottom">
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>
</div>
<div class="gallery">
<div class="title"></div>
<div class="txt"></div>
<div class="image1">
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>
<div class="image2">
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>
<dt></dt>
<dd></dd>
</dl>
</div>
</div>
<div class="foot">
</div>
</body>
</html>
正在回答
同学你好，问题解答如下：
1.contentLayer居中与图片的高度无关。图片不设置高度，默认显示原图大小。图片的父容器高度没有图片的高度大，图片就会溢出。这里只是解决图片高度溢出问题，如下去掉图片的高度：
图片是content的子元素，会撑开content的高度，所以content设置不设置高度都行。但如果不给图片设置高度，就会溢出banner区域了。contentLayer还是相对banner区域居中的，只不过图片超出父容器让你从视觉上看到的是，表单没有在图片的中间显示而已，这里区分开。
2.使用top:80px也可以，代码非常灵活，实现方式不是唯一的哦。
祝学习愉快~
同学你好，参考如下设置：
1. 要设置参照点：定位元素参照已定位的祖先元素定位，如果没有定位的祖先元素，默认参照整个页面（浏览器有差异，有的可能是参照窗口）。这里的表单contentLayer需要参照banner区域定位，所以给banner设置一个定位。banner本身不需要定位移动位置，所以建议设置相对定位，这样不会让它脱离文档流。如下：
2. 在不明确元素宽高的情况下，可以通过如下设置水平垂直居中：
3.这里虽然设置了居中，但是有一个问题：contentLayer和它的父元素banner高度一样，就好比一个盘子放一个大西瓜，不管如何摆放西瓜，也看不到居中效果，因为它占满了整个盘子。只有换成一个小于盘子的水果，才能看到居中效果。（宽度也是太大了，contentLayer里面的内容无法水平铺满）例如如下稍微改动一下，就能看到居中效果了。
效果如下：
4. banner区域定位之后，层级比头部层级大，会把头部挡住。如下给头部设置层级：
而头部定位之后，会脱离文档流。banner区域会往上移动，需要给banner区域设置一个间距：
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星