css中div垂直居中的方法。
利用绝对定位实现的居中
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
}
.father{
position: absolute;
height: 500px;
width: 100%;
background-color:#2AABD2;
}
.children{
position: absolute;
top: 50%;
left: 50%;
background-color: red;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="father">
<div class="children">
</div>
</div>
</body>
</html>效果图如下：
利用flex垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
}
.father{
height: 500px;
width: 100%;
background-color:#2AABD2;
display: flex;
justify-content: center;/*实现水平居中*/
align-items:center; /*实现垂直居中*/
}
.children{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="children">
</div>
</div>
</body>
</html>效果图如下：
transform+relative实现的居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
}
.father{
position: absolute;
height: 500px;
width: 100%;
background-color:#2AABD2;
}
.children
{
width: 300px;
height: 150px;
background-color: #333333;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="children">
</div>
</div>
</body>
</html>效果图如下：
多谢@alexxxcs1提供的另一种方式(不晓得这样能否@到^_^)，嘛其实网上实现居中的方式确实很多，互相探讨加深印象。
css中div垂直居中的方法。的更多相关文章
- css 中 div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- css的div垂直居中的方法，百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中添加屏幕自适应方法（rem）
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- 使用CSS完美实现垂直居中的方法
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今 ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- div垂直居中的方法（转）
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- Vue.js 组件中data的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- windows 10上玩耍ubuntu
win10 已经支持运行子系统ubuntu了. 安装ubuntu 程序和功能>>启用或关闭Windows功能>>勾选"适用于Linux的Windows子系统" ...
- TensorFlow学习笔记6-数值计算基础
TensorFlow学习笔记6-数值计算 本笔记内容为"数值计算的基础知识".内容主要参考<Deep Learning>中文版. \(X\)表示训练集的矩阵,其大小为m ...
- 应用安全 - 软件漏洞 - 泛微OA漏洞汇总
SQL注入 前台SQL注入 用户名:admin' or password like 'c4ca4238a0b923820dcc509a6f75849b' and 'a'='a 密码: 1 验证页面参数 ...
- Win10.去掉任务栏缩略图（just4explorer）
ZC: 该方式只适用于 Explorer(即 WIndows任务管理器),Why? ∵ 看文中设置 regedit 的路径,它设置的就是 Explorer下的键值 ... 1.HKEY_CURRENT ...
- [Python3 练习] 004 水仙花数
题目:水仙花数 (1) 描述 水仙花数各位的数字的立方之和等于自身 如 153 为水仙花数,因为 153 = 1^3 + 5^3 + 3^3 (2) 要求 找到所有的三位数的水仙花数 (3) 程序 # ...
- Java判断一个日期是否在下周日期区间
Java实现判断一个日期是否在下周日期区间的方法 /** * 判断输入的日期是否在下周区间 * @return * @author nemowang */ public static boolean ...
- Appium+Python之批量执行测试用例
思考:当存在多个脚本,每个脚本中有多条测试用例时,我们该如何批量执行呢?分析:首先创建2个测试用例脚本(.py文件),每个脚本有2条测试用例,然后批量执行全部测试用例 #Test_01.py # co ...
- SQL SERVER SP命令及实现跨数据库查询
1.数据库: (1)sp_helpdb:报告有关指定数据库或所有数据库的信息. 例:sp_helpdb --显示所有数据库信息(名称.大小等) 例:sp_helpdb Recruitment ...
- ajax图片上传(asp.net +jquery+ashx)
一.建立Default.aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&q ...