Vue css各种居中显示、固定在屏幕某个位置
vue前端CSS各种居中显示
·
一、居中显示
备注:其中的parent为上一层或者父布局;child为当前div
1.1 水平居中
- 已知宽度块元素宽度 :
.child{width:1000px;margin:0 auto;}
- 文本内容居中:
.parent{text-align:center;}
- 通过表格:
.child{display:table;margin:0 auto;}
- 已知宽度,通过设置position:absolute(定位显示)
.parent{position:relative;}
.child{position:absolute;left:50%;width:150px;margin-left:-75px;}
- 未知宽度,通过设置position:absolute(定位显示)
.parent{position:relative;}
.child{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
- 使用flex布局实现
.parent{display:flex;justify-content:center;} ------- 父布局里设置,全部div居中显示
.parent{display:flex;}.child{margin:0 auto;} -------- 自身div设置
1.2 垂直居中
- 文本垂直居中
.child{height:20px;line-height:20px}
- vertial-align:middle;的使用
第一种方法:.parent{display:table-cell;vertical-align:middle;height:20px;}
第二种方法:.parent{display:inline-block;vertical-align:middle;line-height:20px;}
- 未知高度,设置position:absolute
.parent{position:relative;}
.child{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
- 已知高度,设置position:absolute,margin-top为高度的负一半
.parent{position:relative;}
.child{position:absolute;top:50%;height:150px;margin-top:-75px;}
- 使用flex布局实现
.parent{display:flex;align-items:center;}
二、 居于边缘
.parent{
z-index: 9999; //保证界面里层级显示最高
position: fixed; 配合left:0;(居左) top:0;(居顶部)其他类推
}
更多推荐
已为社区贡献1条内容
所有评论(0)