方法一:绝对定位居中(原始版之已知元素的高宽)
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top: -100px; /*设为高度的1/2*/
margin-left: -100px; /*设为宽度的1/2*/
}
方法二:绝对定位居中(改进版之一未知元素的高宽)
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}
方法三:绝对定位居中(改进版之二未知元素的高宽)
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto; /*很关键的一步*/
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0; /*让四个定位属性都为0*/
}
方法四:flex 布局居中
body {
display: flex; /*设置外层盒子display为flex*/
align-items: center; /*设置内层盒子的垂直居中*/
justify-content: center; /*设置内层盒子的水平居中*/
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
}
那么问题来了,如何垂直居中一个 img(用更简便的方法。)
.content {
//img的容器设置如下
display: table-cell;
text-align: center;
vertical-align: middle;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。