盒子如何垂直水平居中方法
-
盒子垂直水平居中方法:
1、.box{ position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }
2、使用定位垂直水平居中:负margin居中(传统方法)
子绝父相.father{ position:relative; width:300px; height:300px; } .son{ position: absolute; width:100px; height:100px; left:50%; top:50% margin-left: -50%; margin-top: -50%; }
3.transform居中方法
.box { width: 100px; height: 100px; position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); }
个人觉得比较好用的垂直居中方法,还是定位和transform粗体字
-
直接用
flex
更好.container { display: flex; align-items: center; height: 600px; border: 2px solid #006100; } <div class="container"> <div class="centered-element"> <p>I'm a Camper, and I'm vertically centered</p> </div> </div>
@loveme199 ok
-
盒子垂直水平居中方法:
1、.box{ position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }
2、使用定位垂直水平居中:负margin居中(传统方法)
子绝父相.father{ position:relative; width:300px; height:300px; } .son{ position: absolute; width:100px; height:100px; left:50%; top:50% margin-left: -50%; margin-top: -50%; }
3.transform居中方法
.box { width: 100px; height: 100px; position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); }
个人觉得比较好用的垂直居中方法,还是定位和transform粗体字
@xiongbofan 学到老,活到老