Fork me on GitHub

css实现水平和垂直居中方案总结

已知宽高元素水平和垂直居中

position:absolute、top和left50%和margin:-height/2px 0 0 -width/2px;

html 代码

1
2
3
<div class="container">
123
</div>

css 代码

1
2
3
4
5
6
7
8
9
10
11
.container {
position:absolute;
top:50%;
left:50%;
margin:-25px 0 0 -50px;
width: 100px;
height: 50px;
font-size: 40px;
color: #fff;
background-color: rgba(0,0,0,.8)
}

position:fixed、top和right和bottom和left0和margin:auto;

html 代码

1
2
3
<div class="container">
123
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width: 100px;
height: 50px;
font-size: 40px;
color: #fff;
background-color: rgba(0,0,0,.8)
}

未知宽高元素水平和垂直居中

总结一些常用的不定高宽元素居中的方式,以备使用。
以下代码均不考虑兼容性,如需使用,请自行处理浏览器兼容性。

display 为 table 布局(父容器为display: table; 子元素为display: table-cell;)

html 代码

1
2
3
4
5
<div id="container">  
<span id="inner">
123123
</span>
</div>

css 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container{  
display: table;
padding: 60% 30%;
width: 100vw;
height: 100vh;
text-align: center;
}
#inner{
display: table-cell;
vertical-align: middle;
font-size: 40px;
color: #fff;
background-color: rgba(0, 0, 0, .8);
}
PS: 水平居中一般采用两种方式: 1.块级元素:定宽 + margin:0 auto;(由于是不定宽高,所以这里不适用); 2.行内元素:作用于父级元素 text-algin:center;(可以内联化,视情况而定) 垂直方向居中: 使用display:table-cell;vertical-algin:middle;

flex 布局实现

注意:flex 方法兼容 IE10及以上版本

html 代码

1
2
3
<div class="container">
<span class="toast">上传成功</span>
</div>

css 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*父容器*/
.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/*子项目*/
.toast {
padding: 20px;
font-size: 40px;
color: #fff;
background-color: rgba(0, 0, 0, .8);
}
PS:display: flex; // 为父容器使用 flex 布局 justify-content: center; // 决定子项目在主轴的对齐方式 align-items: center; // 决定子项目在交叉轴轴的对齐方式

position + transform 方法实现

注意:flex 方法兼容 IE9及以上版本

html 代码

1
<span class="toast">上传成功</span>

css 代码

1
2
3
4
5
6
7
8
9
10
.toast {
position: fixed;
top: 50%; // 50vh
left: 50%; // 50vw
transform: translate(-50%, -50%);
padding: 20px;
font-size: 40px;
color: #fff;
background-color: rgba(0, 0, 0, .8);
}
PS:对于position: fixed; 之后的 top和left都为50%,这个50%为浏览器窗口宽高的50%, 对于transform中translate(-50%, -50%),这个50%为自身元素的宽高的50%。 或许上面改写成top: 50vh; left: 50vw; 更容易理解。

参考文档:
不定元素宽高用css实现内容水平和垂直都居中
不定宽高div水平垂直居中
flex 布局
滴滴出行-再谈自适应垂直居中

-------------本文结束感谢您的阅读,如果本文对你有帮助就记得给个star-------------
Donate comment here