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实现水平垂直居中的 ...
随机推荐
- iOS-收起键盘
1 除了调用相应控件的resignFirstResponder方法外,还有另外三种办法: 2 重载UIViewController中的touchesBegin方法,然后在里面执行在[self.view ...
- 记录git 软件库
https://github.com/phpredis/phpredis redis扩展 https://github.com/tecnickcom/tcpdf 生成PDF 后续......
- JavaScript form提交汉字乱码
<script type="text/javascript"> var test1="http://www.w3school.com.cn/My first/ ...
- oracle学习笔记day1
oracle数据库前言 oracle sqllesson1 Selecting Rowslesson2 Sorting & Limiting Selected Rowslesson3 Sing ...
- 把cgrep mgrep集成到bashrc
https://android.googlesource.com/platform/build/+/android-4.4.3_r1/envsetup.sh 在~/.bashrc里面增加: #Andr ...
- mysql 行(记录)的详细操作
阅读目录 一 介绍 二 插入数据INSERT 三 更新数据UPDATE 四 删除数据DELETE 五 查询数据SELECT 六 权限管理 一 介绍 MySQL数据操作: DML =========== ...
- 20190924-LeetCode解数独题目分享
解决数独 题目描述 编写一个程序,通过已填充的空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以 ...
- Python之装饰器笔记
概述: 用于管理和增强函数和类行为的代码 提供一种在函数或类定义中插入自动运行代码的机制 特点 更明确的语法.更高的代码可维护性.更好的一致性 编写 函数基础: 将函数赋给变量.将函数作为参数传递. ...
- JS 04 Date_Math_String_Object
Date <script> //1.Date对象 var d1 = new Date(); //Thu May 02 2019 14:27:19 GMT+0800 (中国标准时间) con ...
- aliplay获取播放时长
<div id="player-con" class="frequency-pic"></div> <link rel=" ...