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 ...
随机推荐
- 【转】C#工程连接oracle的一种方式
源地址:https://blog.csdn.net/qq_16542775/article/details/52689068 项目中有个功能需要从一台Oracle数据库获取数据,本以为是很简单的事情, ...
- leecode刷题（1）-- 删除排序数组中的重复项
删除排序数组中的重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度.不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的 ...
- DRF 的解析器和渲染器
一.解析器 解析器作用 解析器的作用就是服务端接收客户端传过来的数据,把数据解析成自己可以处理的数据.本质就是对请求体中的数据进行解析. 在了解解析器之前,我们要先知道Accept以及ContentT ...
- 深度学习TensorFlow常用函数
tensorflow常用函数 TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CPU 还是 GPU, Tensor ...
- 【离散数学】 SDUT OJ 偏序关系
偏序关系 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 给定有限集上二元关系的关系矩 ...
- gitlab忘记管理员密码
gitlab忘记密码后破解! gitlab-rails console production :> user = User.).first irb(main)::> user.passwo ...
- JavaScript的高级知识---词法分析
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...
- n阶幻方
前序 最近在学习一些经典的算法,搞得头昏脑涨,就想换换脑子.在家里的旧书堆里面乱翻,无意中将一本具有十多年历史的小学数学奥林匹克竞赛的书发掘了出来,能放到现在挺不容易的,就拿起来随便翻翻.看了看目录, ...
- Android 通知(Notification)
1.介绍 2.常用属性 3.java后台代码 package com.lucky.test30notification; import android.app.Notification; import ...
- Eclipse工程部署到Tomcat时出现中文乱码问题
1.修改Server.xml文件:添加URIEncoding="UTF-8" <?xml version="1.0" encoding="UTF ...