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 ...
- python：解析requests返回的response（json格式）
import requests, json r = requests.get('http://192.168.207.160:9000/api/qualitygates/project_status? ...
- dede织梦5.7的安全防护设置
dede安全是一直令人堪忧的,但是其用来建网站很方便,如果我们使用dede来建站,一定要做好安全防护工作. 下面总结一下dede织梦5.7的安全防护设置 1.更改管理员名称和密码,尽可能设置的复杂一下 ...
- Spring-boot内置的程序管理监控工具-Actuator
1.引入jar包: <dependencies> <dependency> <groupId>org.springframework.boot</groupI ...
- xml 数组 互相转换方法
public function xmlToArray($xml) { //将XML转为array $array_data = json_decode(json_encode(simplexml_loa ...
- subplot()一个窗口画多个图
import matplotlib.pyplot as plt plt.subplot(m,n,p) m,n表示一个窗口上显示m行n列 p表示正在处理第p个区域的部分(区域编号从左到右,从上到下) f ...
- Python视频教程免费分享（2020年最新版）
为期92天的全套Python视频教程免费分享,总计57G! 里面还有我的笔记,希望对大家有帮助哈~ 1-32天 … … 65-92天 百度云网盘: 链接: https://pan.baidu.com/ ...
- SQL-锁-事物级别
一.锁 锁是一种安全机制,控制并发操作,防止用户读取其他用户正在更改的数据,或者多用户同时修改一个数据,从而保证事物的完整性和数据库的一致性.SQLserver 会自动强制执行锁,但是用户可以通过对锁 ...
- 暴力解决HTMLTestRunner出现dict() ->new empty dictionary的问题
在使用ddt数据驱动之后,HTMLTestRunner报告的用例名称之后出现dict() ->new empty dictionary,如下图所示: 经排查,发现是因为ddt源码中test_do ...
- 关于MyBatis传入String用于test判断的坑
不要在心情糟糕的时候写代码,能坑死自己. 今天码代码的时候出现一个问题,脾气暴躁到砸桌子, 在Mybatis传入参数为String并且用 if test 判断的过程中发现 <if test=&q ...