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中 ...
随机推荐
- Android安全测试（三）应用完整性检验检测
二.app应用完整性1.测试环境 SDK: Java JDK, Android SDK. 工具: 7zip,apktool.jar,signapk.jar 2.操作步骤 第一步:把需要检测的apk放置 ...
- Mac入门--安装PHP扩展redis,swoole
1 php7以下可以通过pecl安装PHP扩展 安装redis扩展 pecl install redis 安装swoole扩展 pecl install swoole 2 PHP7以上通过源码编译安装 ...
- [Python3 填坑] 005 如何“响铃”
目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 问题的由来 2.2 问题的解决 1. print( 坑的信息 ) 挖坑时间:2019/01/08 明细 坑的编码 内容 Py004-2 ...
- hive DML操作
1.数据导入 1)向表中装载数据(load) 语法 hive> load data [local] inpath '/opt/module/datas/student.txt' [overwri ...
- 解决MySQL报错：Access denied for user ‘root’@‘localhost’(using password: YES)
Windows 10(mysql5.1) 修改配置文件 找到MySQL安装目录下配置文件my.ini(在我的win10环境下,其路径为C:\ProgramData\MySQL\MySQL Server ...
- 01背包（第k优解）
Bone Collector II Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- 洛谷 P2672 推销员（贪心，模拟）
传送门 解题思路 第一种: 对于选i家,很显然,a值前i-1家的一定会选,所以只需要考虑最后一家的选法.要么是选择a值第i大的(就不管s了),要么选择剩下的中s最大的. 我们把每一家的情况(s和a)存 ...
- Codeforces - 1198C - Matching vs Independent Set - 贪心
https://codeforces.com/contest/1198/problem/C 要选取一个大小大于等于n的匹配或者选取一个大小大于等于n的独立集. 考虑不断加入匹配集,最终加入了x条边. ...
- .NET基础篇——利用泛型与反射更新实体（ADO.NET Entity Framework）（转）
自从ADO.NET Entity Framework面世以来,受到大家的热捧,它封装了大量代码生成的工具,用户只需要建立好实体之间的关系,系统就是会为用户自动成功了Add.Delete.CreateO ...
- AOP记录日志
1.自定义注解 @Target(ElementType.METHOD) //注解放置的目标位置,METHOD是可注解在方法级别上 @Retention(RetentionPolicy.RUNTIME) ...