css一个元素垂直居中的6种方法
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color: skyblue;
position: relative;
}
p{
width:100px;
height: 100px;
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background-color: red;
} </style>
</head>
<body>
<div id="div1">
<p></p>
</div>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color:skyblue;
position: relative;
}
p{
width:100px;
height:100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top:-50px;
margin-left:-50px;
}
</style>
</head>
<body>
<div id="div1">
<p></p>
</div>
</body>
</html>
方法三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
div {
display: table-cell;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
border: 1px solid #F00;
}
</style>
</head>
<body>
<div>
<p>123nonosfnfon</p>
</div>
</body>
</html>
方法四：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color:skyblue;
overflow: hidden;
}
p{
width:100px;
height:100px;
background-color: red;
margin:0 auto;
position:relative;
top:50%;
margin-top:-50px;
}
</style>
</head>
<body>
<div id="div1">
<p></p>
</div>
</body>
</html>
方法五：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color:skyblue; }
p{
width: 100px;
height: 100px;
background: red;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="div1">
<p></p>
</div>
</body>
</html>
方法六：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color:skyblue;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center; }
p{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div1">
<p></p>
</div>
</body>
</html>
如果你还有其他的方法欢迎在下评论
css一个元素垂直居中的6种方法的更多相关文章
- css如何实现垂直居中（5种方法）
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- CSS 元素垂直居中的 6种方法
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 使用CSS完成元素居中的七种方法
在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...
- css设置元素垂直居中的几个方法
最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来), 不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...
- 【翻译】CSS水平和垂直居中的12种方法
英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...
- CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...
随机推荐
- 超详细的RNN代码实现(tensorflow)
一.学习单步的RNN:RNNCell 如果要学习TensorFlow中的RNN,第一站应该就是去了解“RNNCell”,它是TensorFlow中实现RNN的基本单元,每个RNNCell都有一个cal ...
- 欧姆龙_NX1P_PLC功能模块_限定安全作业空间
程序 和说明 以及流程图 已上传到百度云盘 https://pan.baidu.com/s/1kYF11pQHJ4VxyaXr8E_gAA 主要是用来向量的叉乘 判断俩向量正向夹角
- Python-Web-数据库-mongodb
理念: ----无创建数据库方法,使用即创建 ----里面无数据,即数据库不存在 ----数据库有表,表里有一条数据,则数据库存在 ----表数据为JSON格式[{‘name’:’lisi’,’age ...
- VUE-CLI项目同一局域网手机通过IP访问电脑本地项目
0.找到config文件夹下的index.js文件,修改host内容为hots:'0.0.0.0',此时重新运行项目,则其他设备可以通过ip进行访问 1.首先确保电脑防火墙或者杀毒软件关闭,因为大多数 ...
- html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- fastadmin 后台view data-source关联报500错误问题
data-source 关联模型通过id关联被关联表的name字段,没有name字段就报500
- Java面试 - PATH与CLASSPATH 的区别？
PATH:操作系统提供的路径配置,用于定义所有可执行程序的路径. CLASSPATH:由JRE提供的,用于定义Java 程序解释时类加载路径.
- MapReduce 工作流程
1. Map 阶段 ============================================= 2. Reduce 阶段
- QComboBox的currentIndexChanged信号死循环问题
connect(m_pComboBoxDevice, SIGNAL(currentIndexChanged(int)), this, SLOT(sltComboBoxDeviceCurrentText ...
- 剑指offer52：正则表达式匹配
1 题目描述 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符‘.’表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹配整个 ...