div居中方法总结
在日常开发过程中，我们会经常使用到div居中来处理布局，今天我就把我在开发过程中，遇到的div居中处理方法总结一下，方便日后查看！
div{
margin:0 auto;
width:200px;
height:200px;
background-color: pink;
}
2、水平垂直居中之让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top:;
left:;
bottom:;
right:;
background-color: pink;
}
3、水平垂直居中之确定容器的宽高
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px; /* 外边距为自身宽高的一半 */
background-color: pink;
}
div {
position: absolute;
width:300px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
5、水平垂直居中之利用 flex 布局
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height:600px;
}
.container div {
width: 300px;
height: 300px;
background-color: pink;
}
6、div撑满整屏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div撑满整屏</title>
<style>
.page{
background:pink;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
}
</style>
</head>
<body>
<div class="page"></div>
</body>
</html>
div居中方法总结的更多相关文章
- div 居中方法汇总
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 情况一: 父子容器宽高已知 方法一 html <div class= ...
- div居中方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 实现DIV居中的几种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- div居中和垂直居中的最简单方法
div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...
- DIV居中的经典方法
1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...
- 纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- 让几个横向排列的浮动子div居中显示的方法
div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...
- div居中的三种方法
方法1: #div1{ width:200px; height:200px; background:green; position:absolute; left:0; top:0; right:0; ...
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
随机推荐
- spring框架所有包说明
spring依赖的jar包如下:下面是每个jar包的说明spring.jar 是包含有完整发布模块的单个jar 包.但是不包括mock.jar, aspects.jar, spring-portlet ...
- Ubuntu 安装后的配置及美化（一）
Ubuntu 安装后的配置及美化(一) 记录一下 完成后的主界面. 配置 1.更新源为阿里云 找到 软件和更新 选项,更新源为阿里云的源. 在 其他软件 中将 Canonical合作伙伴 打上勾. 然 ...
- 连接池、数据源、JNDI三者间的关系及用法
连接池:连接池是由容器(比如Tomcat)提供的,用来管理池中的连接对象.连接池自动分配连接对象并对闲置的连接进行回收.连接池中的连接对象是由数据源(DataSource)创建的.连接池(Connec ...
- SDUT OJ 数组计算机（线段树）
学长推荐了这个博客详细的介绍了线段树的建立.查找.更新: 数组计算机 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Prob ...
- ionic4 refresh组件位置变更：Ignored attempt to cancel a touchmove event with cancelable=false
io3 中 refresh组件位置可不定: io4 中 须置顶,否则报错,此外complete方法的调用位置改为target属性 参考:https://github.com/ionic-team/io ...
- sublime text3 添加新片段
1.tools->developer->new snippet 要介绍一下snippet四个组成部分: content:其中必须包含<![CDATA[…]]>,否则无法工作, ...
- CentOS 7 基础网络管理
网络服务管理 network服务是对整个计算机网络服务的控制,也可以理解为控制所有网卡. [root@localhost ~]# systemctl start network //开启网络服务 [r ...
- Android HttpURLConnection的使用+Handler的原理及典型应用
1.介绍 总结:HttpURLConnection用来发送和接收数据. 2.ANR异常报错 (1)ANR(Application not response) 应用无响应, 主线程(UI线程) (2)如 ...
- 【算法笔记】B1028 人口普查
1028 人口普查 (20 分) 某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的——假设已知镇上没有超过 2 ...
- Convert DataTable to List<T> where Class of List is Dynamic
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...