CSS左右垂直居中方法 CSS左右垂直居中方法

文章图片
效果实例图 1.溢出法
介绍：外层div相对定位，内层div绝对定位

子容器绝对定位，top:0，bottom:0，left:0，right:0，margin:auto

- 锐客网html,body{ margin: 0; padding: 0; } .divParent { position:relative; width:600px; height:400px; background:#ddd; margin: 0 auto; } .divChild { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; background:green; width:30%; height:30%; }这里是居中的子元素

2.计算法
介绍：外层div相对定位，内层div相对定位

子容器相对定位 top:50%，translateY(-50%)

- 锐客网html,body{ margin: 0; padding: 0; } .divParent { position:relative; width:600px; height:400px; background:#ddd; margin: 0 auto; } .divChild { position:relative; top:50%; margin:auto; transform:translateY(-50%); -ms-transform:translateY(-50%); /* IE 9 */ -moz-transform:translateY(-50%); /* Firefox */ -webkit-transform:translateY(-50%); /* Safari 和 Chrome */ -o-transform:translateY(-50%); /* Opera */ background:green; width:30%; height:30%; }这里是居中的子元素

3.宽高固定值计算法
介绍：外层div相对定位，内层div绝对定位

宽高一定 top left 50% ，margin-top、margin-tleft宽高各一半

- 锐客网html,body{ margin: 0; padding: 0; } .divParent { position:relative; width:600px; height:400px; background:#ddd; margin: 0 auto; } .divChild { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; }这里是居中的子元素

4.calc计算法
介绍：外层相对，内层绝对

【CSS左右垂直居中方法】top: calc(50% - (* px/2))，left: calc(50% - (* px/2));

- 锐客网html,body{ margin: 0; padding: 0; } .divParent { position:relative; width:600px; height:400px; background:#ddd; margin: 0 auto; } .divChild { position: absolute; width: 200px; height: 200px; top: calc(50% - (200px/2)); left: calc(50% - (200px/2)); background: green; }这里是居中的子元素

注：以上是个人实际应用中使用的主要三种方法、网上还有各样方法提供