我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐,彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作,需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐,彼此相邻。其中一个图像需要在div中绝对定位。
要在所有常见浏览器上工作,需要什么样的CSS ?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
当前回答
我一个朋友的一个技巧:
Div:前面{内容:" ";显示:inline-block;高度:100%;vertical-align:中间;} Div p{显示:inline-block;} < div风格= "高度:100 px;边界:1 px固体;" > < span style=" font - family:宋体;"</p> .我是垂直居中的 < / div >
演示。
其他回答
几乎所有的方法都需要指定高度,但通常我们没有任何高度。
这里有一个css3的三行技巧,它不需要知道高度。
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
甚至在IE9中也支持它。
与其供应商前缀:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
来源:垂直对齐任何只需3行CSS
我最喜欢的新方法是用CSS网格:
/* technique */ .wrapper { display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; } /* visual emphasis */ .wrapper { border: 1px solid red; height: 180px; width: 400px; } img { width: 100px; height: 80px; background: #fafafa; } img:nth-child(2) { height: 120px; } <div class="wrapper"> <img src="https://source.unsplash.com/random/100x80/?bear"> <img src="https://source.unsplash.com/random/100x120/?lion"> <img src="https://source.unsplash.com/random/100x80/?tiger"> </div>
在父div中创建中央子div的三种方法
绝对定位法 Flexbox方法 变换/翻译方法
Demo
/* Absolute Positioning Method */ .parent1 { background: darkcyan; width: 200px; height: 200px; position: relative; } .child1 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; margin: -15px; } /* Flexbox Method */ .parent2 { display: flex; justify-content: center; align-items: center; background: darkcyan; height: 200px; width: 200px; } .child2 { background: white; height: 30px; width: 30px; } /* Transform/Translate Method */ .parent3 { position: relative; height: 200px; width: 200px; background: darkcyan; } .child3 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div class="parent1"> <div class="child1"></div> </div> <hr /> <div class="parent2"> <div class="child2"></div> </div> <hr /> <div class="parent3"> <div class="child3"></div> </div>
使用CSS垂直居中,您可以让外部容器充当一个表,并将内容作为一个表单元格。在这种格式中,您的对象将保持居中。:)
我在JSFiddle中嵌套了多个对象作为一个例子,但核心思想是这样的:
HTML
<div class="circle">
<div class="content">
Some text
</div>
</div>
CSS
.circle {
/* Act as a table so we can center vertically its child */
display: table;
/* Set dimensions */
height: 200px;
width: 200px;
/* Horizontal center text */
text-align: center;
/* Create a red circle */
border-radius: 100%;
background: red;
}
.content {
/* Act as a table cell */
display: table-cell;
/* And now we can vertically center! */
vertical-align: middle;
/* Some basic markup */
font-size: 30px;
font-weight: bold;
color: white;
}
多对象示例:
HTML
<div class="container">
<div class="content">
<div class="centerhoriz">
<div class="circle">
<div class="content">
Some text
</div><!-- content -->
</div><!-- circle -->
<div class="square">
<div class="content">
<div id="smallcircle"></div>
</div><!-- content -->
</div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content -->
</div><!-- container -->
CSS
.container {
display: table;
height: 500px;
width: 300px;
text-align: center;
background: lightblue;
}
.centerhoriz {
display: inline-block;
}
.circle {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: red;
border-radius: 100%;
margin: 10px;
}
.square {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: blue;
margin: 10px;
}
.content {
display: table-cell;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
color: white;
}
#smallcircle {
display: inline-block;
height: 50px;
width: 50px;
background: green;
border-radius: 100%;
}
结果
https://jsfiddle.net/martjemeyer/ybs032uc/1/
要将块元素定位到中心(适用于Internet Explorer 9及以上版本),它需要一个包装器div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}