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中 ...
随机推荐
- request.getParameter() 和request.getAttribute()
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wrs120/article/details/79287607[相同点] 1.都是HttpServle ...
- js(javascript)取float型小数点后两位数的方法
以下我们将为大家介绍 JavaScript 保留两位小数的实现方法:四舍五入以下处理结果会四舍五入: ? 1 2 var num =2.446242342; num = num.toFixed(2); ...
- 修改属性item1(1变化)
给imgList1,7,12,16添加数据 数据层data:{imgList1:[],imgList7:[],imgList12:[],imgList16:[],} 处理层let _this=this ...
- 【ABAP系列】SAP ABAP解析XML的示例程序
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP解析XML的示例 ...
- 数模常用算法系列Matlab实现-----线性规划
线性规划的 Matlab 标准形式 线性规划的目标函数可以是求最大值,也可以是求最小值,约束条件的不等号可以是小于号也可以是大于号.为了避免这种形式多样性带来的不便,Matlab 中规定线性 规划的标 ...
- python基础-12 多线程queue 线程交互event 线程锁 自定义线程池 进程 进程锁 进程池 进程交互数据资源共享
Python中的进程与线程 学习知识,我们不但要知其然,还是知其所以然.你做到了你就比别人NB. 我们先了解一下什么是进程和线程. 进程与线程的历史 我们都知道计算机是由硬件和软件组成的.硬件中的CP ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- BZOJ 1085（IDA*）
题面 传送门 分析 首先,直接搜索肯定会TLE 很容易想到用迭代加深的方法,限定搜索深度 但是,这样仍然不够,需要用启发式的方法优化 我们设计一个估价函数f(x)=g(x)+h(x)f(x)=g(x) ...
- 什么是服务端伪造（SSRF）
什么是服务端伪造(SSRF) 原文:GitHub Pages and Single-Page Apps 译者:neal1991 welcome to star my articles-translat ...
- zip loader
GS.ZipAssetLoader = function(audioContext) { this.audioContext = audioContext, this.objLoader = new ...