CSS布局之居中-阿里云开发者社区

开发者社区> 开发与运维> 正文

CSS布局之居中

简介: CSS布局之居中本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设置,会对子元素生效。

CSS布局之居中
本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法
水平居中

1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设置,会对子元素生效。此方法对,inline、inline-block、inline-table、inline-flex都有效。

.box{
text-align:center;
}
此外,如果块级元素包着一个块级元素,那么我们可以设置外部盒子text-align:center;给内部盒子设置display:inline-block;这样也可以使得内部元素居中。但要注意的是,内部盒子已经设置了display:inline-block,就不可以再设置其他的display,所以最好不要使用这种方法。
复制代码






复制代码

2.块级元素水平居中

使用margin居中

margin:0 auto;但是使用这种方法,要记得给元素设置宽度,否则不会生效

使用absolute+transform

absolute定位,左 50%,然后使用transform向左移动50%;

3.浮动元素水平居中

已知宽度,通过子元素设置relative+负margin  

复制代码
.child{
width:200px;
float:left;
position:relative;
left:50%;
margin:-100px;
}
复制代码
未知宽度,父子元素都用相对定位

复制代码
.parent{
float:left;
postion:relative;
left:50%;
}
.child{
float:left;
position:relative;
right:50%;
}
复制代码
父元素相对于左定位50%;且因为,父元素的宽度是由子元素撑起来的,所以当子元素相对于自身右定位50%时,水平居中

示例 当我们把child的定位取消时

打开child的相对定位时

4.绝对定位元素水平居中 这种方式通过子元素的绝对定位,外加margin:0 auto;

复制代码
.parent{
position:relative;
}
.child{
postion:absolute;
width:100px;
height:100px;
background:red;
margin:0 auto;
left:0;
right:0;
}
复制代码
垂直居中
1.单行内联元素垂直居中 这种方法适合对单行文本的垂直居中,比如应用在顶部菜单栏中

.parent{
height:100px;
line-height:100px;
}
2.块级元素垂直居中

使用absolute+负margin

复制代码
.parent{
position:relative;
}
.child{
height:100px;
position:absolute;
top:50%;
margin-top:-50px;
}
复制代码
使用absolute+tranform

复制代码
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
复制代码
水平垂直居中
可以参考上面的水平居中和垂直居中的方法,结合起来就可以了。
原文地址https://www.cnblogs.com/seanxushuo/p/11397849.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章