css div水平垂直居中
2019独角兽企业重金招聘Python工程师标准>>>
div水平居中对齐
使用margin-left:auto;margin-right:auto;
.style{margin-left:auto;margin-right:auto;}
缩写形式为:
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值
div垂直居中对齐
position:absolute;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
div水平垂直对齐
.style
{
border:1px solid #999;
position: absolute;
width:380px;
height:200px;
left:50%;
top:50%;
margin-left:-190px;
margin-top:-100px;
}
这里使用了绝对定位position:absolute, 使用left和top设置对象距离上和左为50%,但如果设置50%,实际上盒子是没有实现居中效果,所以又设置margin-left:- 190px;margin-top:-100px;,这里有个技巧是,margin-left的值是宽度一半,margin-top的值也是对象高度一 半,同时设置为负,这样就实现了水平和垂直居中。
转载于:https://my.oschina.net/u/1468096/blog/308259
css div水平垂直居中相关推荐
- 前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录 一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...
- 如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...
- 你知道CSS实现水平垂直居中的第10种方式吗?
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- 清除浮动的方法总结CSS实现水平垂直居中方法总结
1.清除浮动的方法总结 当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至 ...
- 关于DIV嵌套(二):div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
- CSS如何水平垂直居中?
CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...
- CSS实现水平垂直居中的方式有哪些?
目录 CSS实现水平垂直居中的方式有哪些? 1.利用flex布局 2.利用flex+margin 3.利用定位,子绝父相 3.1.利用margin: auto(偏移量都为0) 3.2.利用平移tran ...
- css div内容垂直居中
css div内容垂直居中: 1.vertical-align vertical-align只能作用在inline-block或者inline,还有table-cell等元素内 <div sty ...
- css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式 一.使用grid布局 二.使用flex布局 三.使用定位+外边距 四.使用定位+平移 五.使用外边距 + 平移 六.使用文本对齐 + 行高 七.使用表格单元 一.使用 ...
最新文章
- 124 Binary Tree Maximum Path Sum
- b站上java和python视频可以吗_b站有哪些好的java视频?
- 一、目前在ASP.NET中页面传值共有这么几种方式:
- 洛谷——P1056 排座椅
- RedLock实现原理
- 第3课 天安门广场 《小学生C++趣味编程》--C++、Scratch
- 受疫情影响 AMD宣布退出CES线下展会
- windows mysql备份与恢复_windows下Mysql自动备份与恢复说明
- Bind variables in 'in' condition(在in中动态的绑定参数(参数个数可变))
- kmeans-用户分层
- 在计算机中360云盘如何删除文件,如何在360云盘中检索已删除的文件
- 手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发...
- CrossApp logo 跨平台app开发引擎
- esp8266保存html文件,八,ESP8266 文件保存数据(基于Lua脚本语言)
- python path包的使用详解
- sql简单查询和排序分组
- 推荐几个IDEA插件,Java开发者撸码神器。
- 王者荣耀转区仅显示可转移服务器,王者荣耀角色迁移是什么 怎么转区
- 特征函数和概率密度函数的关系
- 【数据可视化】大作业(意向考研高校的数据可视化)