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实现水平垂直居中的 ...
随机推荐
- 对图片清晰度问题，纠结了一晚上。清理了下Libray，瞬间变清晰了，泪奔
对图片清晰度问题,纠结了一晚上.清理了下Libray,瞬间变清晰了,泪奔
- OpenCV计算机视觉实战(Python版)资源
疲劳检测 pan.baidu.com/s/1Ng_-utB8BSrXlgVelc8ovw #导入工具包 from scipy.spatial import distance as dist from ...
- P4568 飞行路线【分层图最短路】
题目链接:https://www.luogu.org/problem/P4568 题目大意:给定n个点,m条无向边,k次机会经过边时代价为 0 .给出起点和终点,求其最短路径. 解题思路: 两种方法, ...
- Java 应用程序的运行机制
计算机高级语言: 编译型 (C) 解释性(JS)Java 使两种类型的结合 java 编译器 class \|/jvm ...
- oracle管道函数的用法(一行拆为多行)
oracle管道函数是一类特殊的函数,oracle管道函数返回值类型必须为集合 如果需要在客户端实时的输出函数执行过程中的一些信息,在oracle9i以后可以使用管道函数(pipeline funct ...
- 《Mysql 锁 - 概述》
一:锁类型(加锁范围区分类型) - MySQL里面的锁可以分为:全局锁.表级锁.行级锁. 二:全局锁 - 作用 - 对整个数据库实例加锁. - 加锁方式 - MySQL提供加全局读锁的方法:Flus ...
- git简易指南
目录 工作流 初始化仓库 查看分支 添加和提交 推送改动 分支 重命名分支 更新与合并 替换本地改动 回滚 远程仓库 有用的贴士 GIT vs SVN 工作流 你的本地仓库由 git 维护的三棵&qu ...
- MAC自带Apache配置python3
进入终端 sudo apachectl start 直接访问localhost 解决Mac下apache 403的问题 网上查资料发现是因为Mac版本升级导致了apache策略发生变更了,所以我们修改 ...
- 数据类型 _python
字符串 str # a ="asd bfg" # print(a.capitalize()) #首字母大写 # print(a.title()) #每个单词首字母大写 # prin ...
- Django中的Object Relational Mapping(ORM)
ORM 介绍 ORM 概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用 ...