在学vue的路上有些瓶颈期,就想起来了前段时间用过的居中方式,这个技能要一直用到,今天就总结一下css水平与垂直居中的16种方式:
一、水平居中
1.1行内元素
.parent{
text-align:center;
}
1.2块级元素
1.2.1块级元素一般居中方式
.son{
margin:0 auto;
}
1.2.2子元素含float
.parent{
width:fit-content;
margin: 0 auto;
}
.son{
float:left;
}
1.2.3Flex弹性盒子
.parent{
display:flex;
justify-content:center;
}
1.2.4绝对定位
1)transform
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
2) left:50%
.son{
position:absolute;
width:宽度;
left:50%;
margin-left:-0.5*(宽度);
}
3) left/right :0
.son{
position:absolute;
width:宽度;
left:0;
right:0;
margin: 0 auto;
}
二、垂直居中
2.1行内元素(单行文本)
.parent{
height:高度;
}
.son{
line-height:高度;
}
2.2块级元素
2.2.1行内块级元素
.parent::after, .son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:' ';
height:100%;
}
2.2.2 table
.parent{
display:table;
}
.son{
display:table-cell;
vertical-align:middle;
}
优点:元素高度可以动态改变,不需再css中定义,如果父元素没有足够高度的话,该元素内容也不会被截断。
缺点:IE6、IE7甚至IE8 beta中无效。
2.2.3 Flex弹性盒子
.parent{
display:flex;
align-items:center;
}
优点:内容块的宽度任意,优雅的溢出,可用于复杂布局中。
缺点:IE8、IE9不支持,需要浏览器厂商前缀,渲染容易出现问题。
2.2.4绝对定位
1)transform
.son{
position:absolute;
top:50%;
transform:translate(0,-50%);
}
优点:代码少
缺点:IE8不支持,属性需要追加浏览厂商前缀,可能干扰其他的transform效果等。
2) top:50%
.son{
position:absolute;
height:高度;
top:50%;
margin-top:-0.5*(高度);
}
优点:适用于所有浏览器
缺点:父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条。
3) left/right :0
.son{
position:absolute;
width:宽度;
left:0;
right:0;
margin: 0 auto;
}
3) top/bottom :0;
.son{
position:absolute;
top:0;
bottom:0;
margin: auto 0;
}
优点:代码少
缺点:没有足够的空间时,子元素会被截断,但不会有滚动条。
、、
、、
、、
、、
、、
、、
、、
具体的完整的水平垂直居中的例子
1、使用flex
2、position+transform inner的宽高未知
3、position+负的margin inner宽高已知
4、设置各个方向的距离都是0,再将margin设为auto,也可以实现,前提是inner宽高已知
<div class="outer">
<div class="inner"></div>
</div>
//1
.outer{
display: flex;
justify-content: center;
align-items: center
}
//2
.outer{
position:relative;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
//3
.outer{
position: relative;
}
.inner{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
//4
.outer {
position: relative;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}