我如何用CSS垂直集中一个 <div> 在另一个 <div> 中?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
当前回答
我只是使用最简单的解决方案,但它在所有浏览器工作:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div within a div?</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 80%;
height: 500px;
background-color: #003;
margin: 0 auto;
}
#outer p{
color: #FFF;
text-align: center;
}
#inner{
background-color: #901;
width: 50%;
height: 100px;
margin: 0 auto;
}
#inner p{
color: #FFF;
text-align: center;
}
</style>
</head>
<body>
<div id="outer"><p>this is the outer div</p>
<div id="inner">
<p>this is the inner div</p>
</div>
</div>
</body>
</html>
其他回答
中心:自动宽度边界
这个盒子是垂直集中,通过将其右边和左边边界的宽度设置为“自动”。 这是实现垂直集中CSS的最佳方式,并且在大多数使用CSS2支持的浏览器中非常好。 不幸的是,Internet Explorer 5/Windows不响应这种方法 - 该浏览器的缺点,而不是技术。
Internet Explorer 5/Windows 不正确地应用CSS“文本平衡”属性到区块级元素。 声明“文本平衡:中心”为包含区块级元素(通常是BODY元素)的垂直集中在Internet Explorer 5/Windows中的框架。
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
}
#Content {
width: 500px;
margin: 0px auto;
text-align: left;
padding: 15px;
border: 1px dashed #333;
background-color: #EEE;
}
http://bluerobot.com/web/css/center1.html
中心一个元素,不需要动态高度和宽度的旋转器/父母
没有副作用:它不会限制一个集中元素的宽度低于视门宽度,当使用Flexbox中的边缘在一个集中元素内
position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
垂直 + 垂直中心,如果其高度与宽度相同:
position: fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
可以使用中心标签为方便
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
CSS 定义内容属性
它将Flexbox元件调整到容器的中心:
#outer {
display: flex;
justify-content: center;
}
<div class="container">
<div class="res-banner">
<img class="imgmelk" src="~/File/opt_img.jpg" >
</div>
</div>
CSS 代码
.res-banner{
width:309px;
margin: auto;
height:309px;
}
