定义CSS样式:
<style>
div{
width: 450px;
height: 300px;
background-color: #abcdef;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
</style>
说明:
在CSS3中,可以使用translate()方法将元素沿着水平方向(X轴)和垂直方向(Y轴)移动。
对于位移translate()方法,我们分为3种情况:ranslateX(x):元素仅在水平方向移动(X轴移动)水平方向向右移动;
translateY(y):元素仅在垂直方向移动(Y轴移动)垂直方向向下移动;
transklate(x,y):元素在水平方向和垂直方向同时移动(X轴和Y轴同时移动)
网页元素:
<body>
<div>待居中元素</div>
</body>
1、原创文章,作者:诺米,如若转载,请注明出处:https://www.http3w.com/archives/691
2、本站内容若有雷同从属巧合,若侵犯了您的权益,请联系本站删除,E-mail: wtao219@qq.com
相关推荐
-
Could not resolve com.android.tools.build:gradle:4.1.1.
安装Android studio环境,报错Could not resolve com.android.tools.build:gradle:4.1.1. 网上尝试各种办法未能解决;…
-
Fastjson低版本漏洞
引言: 2022年5月23日,fastjson 官方发布安全通报,fastjson <= 1.2.80 存在反序列化任意代码执行漏洞,在特定条件下可绕过默认auto…
-
Got permission denied while trying to connect to the Docker daemon
使用root用户安装的docker并启动后,切换回docker普通用户,报权限问题如下: 解决办法:
-
vue程序打包 npm ERR! missing script: build
结果报错npm ERR! missing script: build,后来发现package.json中scripts参数为“scripts”: {R…
-
审批流程的表结构设计
要做一个通用的流程系统,大概应建立如下数据表: 1. 流程表(tbl_flow) 字段名 数据类型 备注 flow_id int 流程编号,主键 flow_no int 流程号…
-
如何实现微信支付功能?
由于本人近期做过的一个微信小程序项目,里面涉及到了微信支付功能,故在此记录下来,以帮助更多需要的人!! 实例后端接口采用Java语言开发;前端自然是小程序了(H5也一样) 前期准备…
-
docker搭建zookeeper集群
本实例基于docker-compose搭建zookeeper集群,搭建过程中遇到了版本问题,一直启动不了,错误编码如下: 报错版本,镜像3.4 解决办法:使用zookeeper 3…
-
uniapp隐藏头部并自定义返回按钮
我在编写一个小程序分享页面的时候,需要将背景图铺满整改手机屏幕,因此,需要隐藏掉头部区域,在通过官方示例隐藏成功之后,发现返回上个页面的左边按钮没了,于是经过各种查询,发现个自定义…
-
docker-compose安装wordpress开启https
默认使用docker-compose安装wordpress后,就算开启了443端口,还是无法使用https的。为了解决这个问题,有了这个教程。 本教程参考了互联网的各种教程,再次表…
-
使用Docker安装IK中文分词器
下载IK分词器:elasticsearch-analysis-ik-7.2.1.zip 点我去下载 进入容器: 在plugins目录下创建ik文件夹: mkdir /usr/sha…