元素居中是常见的场景,此页为总结各种实现方式
水平居中
内联元素(inline,inline-block等),将父元素的text-align
属性设为center
。
text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。
块级元素(block等),设置margin-left
,margin-right
为auto
,此时左右外边距会平分水平方向的多余空间,实现居中。注意块级元素要有固定宽度,否则会铺满父元素,占据100%宽度。
/* 内联元素 */
.inline-center-parent{
text-align:center;
}
/* 块级元素 */
.block-center{
width:60%;
margin: 0 auto;
}
垂直居中
相对于水平居中,垂直居中实现稍微复杂一些
内联元素的垂直居中
如果是单行时,设置元素了的line-height
与父元素的height
一致即可,line-height
会继承,设置在父元素上也一样。
/*容器样式*/
.inline-center-parent{
height: 100px;
line-height: 100px;
}
多行时,上面的样式就会出现问题,因为每行的高度都和容器高度一样,会溢出,此时可以使用table-cell
来实现居中。
/*容器样式*/
.inline-center-parent{
display: table-cell;
vertical-align: middle; // 设置垂直居中
}
也可以将多行内联元素用块级元素包裹,然后就变成了块级元素的居中问题。
块级元素的垂直居中
- 垂直居中可以使用绝对定位处理,
top
设为50%
(top以容器的高度计算百分比
),然后再想办法让块元素向上移动自身的一半
- 如果是固定高度
.block-center-parent {
position:relative;
}
.block-center {
position:absolute;
top:50%;
height:100px;
margin-top:-50px; // margin-top为负值,且为高度的一半
}
- 如果是高度不固定
一个思路是通过transform
变化(tranform平移以自身宽高进行计算),向上移动自身的一半
.block-center {
position:absolute;
top:50%;
transform: translateY(-50%);
}
另一个思路是通过margin:auto
,没错!垂直居中也可以使用margin:auto
来实现。
.block-center {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height: max-content;
width: max-content;
margin:auto;
}
margin-top
,margin-bottom
在普通情况下,设置为auto
时,默认为0
;但是绝对定位脱离文档流,又通过top,left,bottom,right指定子元素的边界后,子元素会默认填充整个容器,此时margin:auto
会让垂直方向上也平分多余空间。注意需要指定height和width,否则height和width会填充满整个空间,margin均为0;
- 使用flex
flex
应该是最便捷方式
.block-center-parent {
display:flex;
align-items:center; // 规定了交叉轴的对齐方式(默认情况下,垂直方向为交叉轴)
}
垂直水平居中
上面的一些方式可以同时实现水平居中和垂直居中。
display: absolute
+margin:auto
.block-center {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height: max-content;
width: max-content;
margin:auto;
}
display: absolute
+transfrom
/* 水平方向也使用transform */
.block-center {
position:absolute;
top:50%;
left:50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
display:flex
.block-center-parent {
display:flex;
justify-content:center; // 规定了主轴的对齐方式
align-items:center; // 规定了交叉轴的对齐方式
}
另一种方式是
.block-center-parent {
display:flex;
}
.block-center {
margin:auto;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/229225.html