让一个div垂直居中在当前页面

简介: 让一个div垂直居中在当前页面
<div id="background">
<div id="son">
</div>
</div>

在css中

#background{
    background-image: url("../assets/下载.png");
    background-color: black;
    width: 100vw;
    height: 100vh;
    position: relative;
}
#son{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

这样即可实现垂直居中

相关文章
|
6月前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
57 0
UniApp 获取当前页面标题(navigationBarTitleText)
UniApp 获取当前页面标题(navigationBarTitleText)
1338 0
|
1月前
多个p标签,并让div“flex”布局,且单行溢出隐藏
多个p标签,并让div“flex”布局,且单行溢出隐藏
27 0
|
前端开发
css按钮定位在div底部
css按钮定位在div底部
164 0
layui在当前页面弹出层的HTML
layui在当前页面弹出层的HTML
137 0
div盒子水平垂直居中以及表格的居中的方法
div盒子水平垂直居中以及表格的居中的方法
146 0
|
Web App开发 JavaScript Android开发
jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
webtouch(webapp)页面,防苹果手机safari浏览器,往上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。
389 0
|
前端开发
将div铺满body三种方式
将div铺满body三种方式
315 0
|
前端开发
内容滚动条和子 div 高度自适应
一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。 先放最终效果(在下面会有demo代码。): Paste_Image.png 实现这些效果要怎么做呢?咱一步一步来。 第一步: 先设置html结构:这里我已经搭好了。 第二步然后开始写css样式了 设置父元素box的样式 设置box1的样式 现在尝试把html解除注释 下面就到了关键的部分了(文章末尾有demo,不想看的话,可以自己试试。): 在上面我们已经设置了最大高度和最小高度,因为box1空间不够所以溢出来了。
827 0
内容滚动条和子 div 高度自适应