我有一个带有两个图像和h1的div。 所有这些都需要在div内垂直对齐，彼此相邻。
其中一个图像需要absolute定位在div中。
在所有常见浏览器上工作所需的CSS是什么？
1
2
3
| <img src =".."></img >
testing...
<img src ="..."></img > |
哇，这个问题很受欢迎。它基于vertical-align属性中的误解。这篇优秀的文章解释了它：
理解Gavin Kistner的vertical-align或"如何(不)垂直居中"。
"如何以CSS为中心"是一个很棒的网络工具，它有助于为不同的情况找到必要的CSS居中属性。
简而言之(并防止链接腐烂)：
-
内联元素(以及仅内联元素)可以通过vertical-align: middle在其上下文中垂直对齐。但是，"context"不是整个父容器的高度，而是它们所在的文本行的高度.jsfiddle示例
-
对于块元素，垂直对齐更难，并且在很大程度上取决于具体情况：
-
如果内部元素可以具有固定高度，则可以使其位置absolute并指定其height，margin-top和top位置。 jsfiddle的例子
-
如果居中元素由一条线组成并且其父高度是固定的，则可以简单地设置容器的line-height以填充其高度。根据我的经验，这种方法非常通用。 jsfiddle的例子
-
......还有更多这样的特殊情况。
现在Flexbox支持正在增加，应用于包含元素的CSS将垂直居中包含的项：
1
2
3
4
| .container {
display: flex;
align-items: center;
} |
如果您还需要定位Explorer 10和旧的(<4.4)Android浏览器，请使用带前缀的版本：
1
2
3
4
5
6
7
8
9
10
11
| .container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
} |
我使用了这个非常简单的代码：
HTML：
1
2
3
4
| Some txt
<p >
bla bla bla
</p > |
CSS：
1
2
| div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; } |
显然，无论使用.class还是#id，结果都不会改变。
它对我有用：
1
2
3
4
5
| .vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
} |
1
2
3
4
5
| .outer {
display: flex;
align-items: center;
justify-content: center;
} |
我朋友的一项技巧：
HTML：
1
2
| <p style="border:1px dotted;">I'm vertically centered.
</p> |
CSS：
1
2
| div:before {content:""; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;} |
DEMO在这里
要将块元素定位到中心(在IE9及以上版本中工作)，需要一个包装器div：
1
2
3
4
5
6
| .vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
} |
All of them need to be vertically aligned within the div
对齐怎么样？图像的顶部与文本顶部对齐？
One of the images needs to be absolute positioned within the div.
相对于DIV绝对定位？也许你可以勾勒出你正在寻找的东西......？
fd描述了绝对定位的步骤，以及调整H1元素的显示，使得图像与其内联。为此，我将添加您可以使用vertical-align样式对齐图像：
1
2
| #header h1 { display: inline; }
#header img { vertical-align: middle; } |
...这会将标题和图像放在一起，顶边对齐。存在其他对齐选项;看文档。您可能还发现删除DIV并将图像移动到H1元素内是有益的 - 这为容器提供了语义值，并且无需调整H1的显示：
1
2
3
4
| <h1 id=header">
<img src=".."></img>
testing...
<img src="..."></img> |
使用这个公式，它将始终没有裂缝：
1
2
3
4
5
6
7
8
| #outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */ |
1
2
3
4
| any text
any height
any content, for example generated from DB
everything is vertically centered |
我的诀窍是在div中放入一个包含1行和1列的表，设置100％的宽度和高度，以及属性vertical-align：middle。
1
2
3
4
5
6
7
| <table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table> |
小提琴：
http://jsfiddle.net/joan16v/sbq??jnn9q/
几乎所有方法都需要指定高度，但通常我们没有任何高度。
所以这里有一个CSS3 3线技巧，不需要知道高度。
1
2
3
4
5
| .element {
position: relative;
top: 50%;
transform: translateY(-50%);
} |
甚至在IE9中也支持它。
及其供应商前缀：
1
2
3
4
5
6
7
| .element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
} |
资料来源：http：//zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
有两种方法可以垂直和水平对齐元素
Bootstrap 4
CSS3
1. Bootstrap 4.3.X
垂直对齐：d-flex align-items-center
对于水平对齐：d-flex justify-content-center
1
2
3
4
| .container {
height: 180px;
width:100%;
} |
1
2
3
4
5
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
I am in Center |
2. CSS3
1
2
3
4
5
6
7
8
9
10
11
12
13
| .container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
} |
按照今天的说法，我找到了一个新的解决方法，使用CSS3在div中垂直对齐多个文本行(我也使用bootstrap v3网格系统来美化UI)，如下所示：
1
2
3
4
5
6
7
8
9
10
| .immediate-parent-of-text-containing-div{
height: 50px; /* or any fixed height that suits you.*/
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
} |
根据我的理解，包含元素的文本的直接父级必须具有一些高度。我希望它也会对你有所帮助。谢谢！
我们可以使用CSS函数计算来计算元素的大小，然后相应地定位子元素。
示例HTML：
和CSS：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
} |
在这里创建的演示：https：//jsfiddle.net/xnjq1t22/
此解决方案也适用于响应div height和width。
注意：未测试calc函数与旧浏览器的兼容性。
默认情况下，h1是一个块元素，将在第一个img之后的行上呈现，并将导致第二个img出现在块后面的行上。
要阻止这种情况发生，您可以将h1设置为具有内联流行为：
1
| #header > h1 { display: inline; } |
至于将img绝对定位在div中，你需要将包含div设置为"已知大小"才能正常工作。根据我的经验，您还需要将位置属性更改为默认值 - 位置：relative对我有用：
1
2
| #header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; } |
如果你可以让它工作，你可能想尝试从div.header逐步删除高度，宽度，位置属性，以获得所需的最小属性，以获得你想要的效果。
更新：
这是一个适用于Firefox 3的完整示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head >
Example of vertical positioning inside a div
<style type ="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style >
</head >
<body >
<img src ="#" alt ="Image 1" width ="40" height ="40" / >
Header
<img src ="#" alt ="Image 2" width ="40" height ="40"
id ="img-for-abs-positioning" / >
</body >
</html > |
使用CSS到垂直中心，您可以让外部容器像表格一样，内容作为表格单元格。在这种格式中，您的对象将保持居中。 :)
我在JSFiddle中嵌套了多个对象作为示例，但核心思想是这样的：
HTML
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| Some text
<!-- content -->
<!-- circle -->
<!-- content -->
<!-- square -->
<!-- center-horiz -->
<!-- content -->
<!-- container --> |
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| .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/
我最喜欢的方法是使用CSS网格：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| /* 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;
} |
1
2
3
| <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中使用一个单元格表！只需将单元格和表格高度设置为100％即可，您可以使用vertical-align。
div内部的单格表处理垂直对齐，向后兼容回到石器时代！
这是我在div中的i元素的个人解决方案
JSFiddle示例
HTML
1
| <i class="fa fa-plus icon"> |
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .circle {
border-radius: 50%;
color: blue;
background-color: red;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
}
.icon {
font-size: 50px;
vertical-align: middle;
} |
＃3在父div中制作中心子div的方法
-
绝对定位方法
-
Flexbox方法
-
变换/翻译方法
演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| /* 1st way */
.parent1 {
background: darkcyan;
width: 200px;
height: 200px;
position: relative;
}
.child1 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -15px;
}
/* 2nd way */
.parent2 {
display: flex;
justify-content: center;
align-items: center;
background: darkcyan;
height: 200px;
width: 200px;
}
.child2 {
background: white;
height: 30px;
width: 30px;
}
/* 3rd way */
.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%);
} |
对我来说，它的工作方式如下：
"a"元素使用Bootstrap类转换为按钮，现在它在外部"div"内垂直居中。
我一直在使用以下解决方案(没有定位和没有行高)，因为一年多来，它也适用于IE 7和8。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <style >
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial ;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom : 1;
vertical-align: middle;
}
</style >
<p >
Line 1
</p >
<p >
Line 2
</p > |
using display flex, first you need to wrap the container of the item
that you want to align.
1
2
| <span>test1</span>
<span>test2</span> |
then apply the following css to wrapper div or outdiv in my example
1
2
3
4
5
| .outdiv {
display: flex;
justify-content:center;
align-items:center;
} |
只是这个：
1
2
3
4
5
6
7
| <table style="width: 100%; height: 100%">
<tr>
<td style="width: 100%; height: 100%; vertical-align: middle;">
What ever you want vertically-aligned
</td>
</tr>
</table> |
div内部的单格表处理垂直对齐，向后兼容回到石器时代！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
+
</body>
</html> |
这是另一种(响应)方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
} |
http://jsfiddle.net/herrfischerhamburg/JcVxz/
我是一个刚刚进入网络编程的.NET人。我没有使用CSS(嗯，一点点)。我使用了一些JavaScript来实现垂直居中以及jQuery的.css功能。
我只是发布测试中的所有内容。它可能不是太优雅，但它到目前为止工作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
<script type="application/javascript">
function centerElementVertically(id) {
var btnDivHeight = $(id).outerHeight();
var prnt = $(id).parent();
var parentHeight = prnt.outerHeight();
var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
var newPct = newTop / parentHeight+'%;';
$(id).css({top: newTop});
}
function showAlert(){
alert("alert");
}
$(window).load(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
});
$(window).resize(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
})
<style>
#div1 {
position:relative;
height: 33%;
background-color: red;
overflow: hidden;
}
#buttonLeft {
position: relative;
float:left;
width:50%;
height:20%;
background-color: cornsilk;
}
#buttonRight {
position: relative;
float:right;
width:50%;
height:50%;
background-color: darkorchid;
}
#testerbtn {
position: absolute;
}
body {
background-color: aqua;
}
</style>
<body>
<button id="testerbtn">tester</button>
</body>
</head>
</html> |
...
或CSS
1
2
3
4
5
| .someClass
{
display: table-cell;
vertical-align:middle;
} |
浏览器覆盖范围
