水平垂直居中div（css3）
一、在需要居中的元素加上如下C3属性即可:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div{
height: 330px;
width: 330px;
background-color: mediumspringgreen;
border: 6px solid lightcoral;
text-align: center;
line-height: 330px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body> <div class="div">上下左右居中</div> </body>
</html>
二、只要在父级元素上面加上这三句话就可以实现不定宽高水平垂直居中:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
width: 900px;
height: 900px;
background-color: aqua;
display:flex;
justify-content:center;/*水平居中*/
align-items:center;/*垂直居中*/ }
.div{
height: 330px;
width: 330px;
background-color: mediumspringgreen;
border: 6px solid lightcoral;
text-align: center;
line-height: 330px;
/*position: fixed;*/
/*top: 50%;*/
/*left: 50%;*/
/*-webkit-transform: translateX(-50%) translateY(-50%);*/
/*-moz-transform: translateX(-50%) translateY(-50%);*/
/*-ms-transform: translateX(-50%) translateY(-50%);*/
/*transform: translateX(-50%) translateY(-50%);*/
}
</style>
</head>
<body> <div class="father">
<div class="div">上下左右居中</div>
</div> </body>
</html>
水平垂直居中div（css3）的更多相关文章
- div水平垂直居中方法及优缺点
代码: <div class="father"> <div class="son"> </div></div> ...
- 【html】【10】div布局[div水平垂直居中]
必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- 元素水平垂直居中（transform，margin，table-cell，jQuery）
1.水平居中 .div{ margin:0 auto; (或者 margin:auto;) width:500px; height:300px; } 2.使用margin水平垂直居中 方式一: .di ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
随机推荐
- how-to-install-siege-on-centos-7
https://www.joedog.org/siege-home/ https://roastahost.com/how-to-install-siege-on-centos-7/ (Works!) ...
- [Git] Ubuntu 升级 git 版本
$ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git
- TCP/IP、Http、Socket的区别
1.标准网络层次 网络由下往上分为:物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: 7 应用层 例如HTTP. ...
- Centos7下配置node.js环境
1.软件环境: Centos7.VMware 10.0.NodeJS v0.10.24 2.安装过程 1>安装过程中需要管理员权限,及root权限,可以敲入如下命令. [sharing@loca ...
- 【转载】说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可 ...
- TortoiseGit状态图标不能正常显示的解决办法
1:确认是不是64bit 系统上装了 32bit 的 TortoiseGit,如果是的话,这个只要再安装 64bit 的 TortoiseGit就可以 了,如果不是,请往下看. 2:在开始菜单的搜 ...
- j2ee部分
j2ee部分 1.BS与CS的联系与区别. C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.InFORMix或 ...
- 使用Cobbler无人值守安装CentOS6.5(一)
Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行代码),使用简单的命令即可完成PXE网络安装环境的配置 ...
- HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【MongoDB for Java】Java操作MongoDB
上一篇文章: http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html介绍到了在MongoDB的控制台完成MongoDB的数据操作,通过 ...