首页 > 代码库 > CSS实现垂直居中水平居中
CSS实现垂直居中水平居中
1、绝对定位居中(子元素需设置宽高)
- > 原理:元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width。
内容块的父容器:
position:relative;
子元素: (必须设置高度)
position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin:auto;
2、绝对定位配合margin(子元素需设置宽高)
- > 原理:top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;
第一种
<style> .one{ border: 1px solid red; width: 200px;height: 200px; position: relative; } .two{ background: red; width: 100px;height: 100px position: absolute;left: 50%;top:50%; margin: -50px 0 0 -50px; //(margin设置百分比是相当于自身的高度与宽度)
}
</style>
<div class="one">
<div class="two"></div>
</div>
第二种
<style> .one{ border: 1px solid red; width: 300px;height: 300px; position: relative; } .two{ position:absolute; top:50%; left:0; right:0; margin:auto; margin-top:-100px; //(margin设置百分比是相当于自身的高度与宽度) width:200px; height:200px; background: red; } </style> <div class="one"> <div class="two"></div> </div>
3、table-cell方式(子元素不需设置宽高)
- > 原理:利用表格布局的特点,vertical-align设置为middle;单元格中的内容与所在行中间对齐
父容器:(设置宽高)
display:table-cell;text-align:center;vertical-align:middle;
子元素:
display:inline-block;vertical-align:middle;
<style> .one{ border: 1px solid red; width: 200px;height: 200px; display:table-cell;vertical-align:middle;text-align: center; } .two{ background: red; (1)display:inline-block;(用此方法向上偏差2px) (2)margin:auto(垂直水平居中) } </style> <div class="one"> <div class="two">11111111111</div> </div>
4、通过添加空span标签使图片居中(子元素需设置宽高)
父容器:
text-align: center;
<span>:
display: inline-block; //将行内元素改变为行内块元素显示 width: //1px; 实现IE下可读效果 height: 100%; //使用元素高度和图片容器高度一样 vertical-align: middle; //垂直对齐
图片:
vertical-align: middle;
<style> .one{ border: 1px solid red; width: 200px;height: 200px; text-align: center; } span{ display: inline-block; width: 1px; height: 100%; vertical-align: middle; } </style> <div class="one"> <span></span> <img src="http://www.mamicode.com/img/jian.png" > </div>
5、外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding,)的一半,再加上top: 50%; left: 50%;。
(子元素需设置宽高)
<style> .one{ border: 1px solid red; width: 200px;height: 200px; position: relative; } .two{ background: red; width: 30px; height: 20px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -35px; /* (width + padding)/2 */ margin-top: -30px; /* (height + padding)/2 */ } </style> <div class="one"> <div class="two"></div> </div>
6、内容定义transform:translate(-50%,-50%),并且加上top:50%;left:50%。(子元素需设置宽高)
<style> .one{ border: 1px solid red; width: 200px;height: 200px; position: relative; } .two{ background: red; width: 50%; height: 30%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } </style> <div class="one"> <div class="two"></div> </div>
7、增加额外子元素设置margin-bottom为内容元素的高度+padding的一半。(不能实现水平垂直居中,仅垂直居中)
- > 原理与2方法类似,floater的下边界是包含框的中心线,负下外边界保证center的中心线与包含框中心线重合
<style> .one{ border: 1px solid red; width: 200px;height: 200px; } .floater{ float: left; height: 50%; width: 100%; margin-bottom: -10%; } .two{ clear: both; height: 20%; background: red; } </style> <div class="one"> <div class="floater"></div> <div class="two"></div> </div>
8、inline-block方式(子元素不需设置宽高)
- > 原理:为同一行的inline-block元素设置vertical-align:middle,该行内的inline-block元素会按照元素的垂直中心线对齐。
<style> .one{ border: 1px solid red; width: 300px;height: 300px; text-align: center; } .one:after{ content: ‘‘; display: inline-block; vertical-align: middle; height: 100%; } .two{ background: red; display:inline-block; vertical-align:middle; } </style> <div class="one"> <div class="two">11111111111111111111</div> </div>
9、弹性盒式布局(子元素不需设置宽高)
[CSS弹性盒][1]
第一种
<style> .one{ border: 1px solid red; width: 300px;height: 300px; display: flex; align-items: center; justify-content: center; } .two{ background: red; } </style> <div class="one"> <div class="two">111111111111</div> </div>
第二种
<style>
.one{
border: 1px solid red;
width: 300px;height: 300px;
display: flex;
}
.two{
background: red;
margin:auto;
}
</style>
<div class="one">
<div class="two">111111111111</div>
</div>
CSS实现垂直居中水平居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。