在日常开发过程中,我们会经常使用到div居中来处理布局,今天我就把我在开发过程中,遇到的div居中处理方法总结一下,方便日后查看!

       1、 水平居中:给div设置一个宽度,然后添加margin:0 auto属性  
 
 
 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;
}
        4、水平垂直居中之未知容器的宽高,利用 `transform` 属性 
 
  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居中方法总结的更多相关文章

  1. div 居中方法汇总

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 情况一: 父子容器宽高已知 方法一 html <div class= ...

  2. div居中方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 实现DIV居中的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. div居中和垂直居中的最简单方法

    div居中方法: 1)对父盒子添加 text-align="center": 2)子盒子添加 margin:0 auto; 例子: body{text-align:center} ...

  5. DIV居中的经典方法

    1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...

  6. 纯css使div垂直居中,div垂直,div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  7. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  8. div居中的三种方法

    方法1: #div1{ width:200px; height:200px; background:green; position:absolute; left:0; top:0; right:0; ...

  9. 用CSS控制DIV居中失效的解决方法

    1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

随机推荐

  1. 20165219 学习基础与C语言基础调查

    学习基础与C语言基础调查 你有什么技能比大多数人要好? 因为不知道其他人的具体情况,我只能说,我比较擅长钢琴,素描,国画,这也是小时候掌握的比较好的技能. 针对这个技能的获取有什么成功的经验 小时候学 ...

  2. Linux环境下jdk、tomcat、redis安装及配置

    环境说明: linux : centOS jdk : 1.8 tomcat : 8.5 redis : 4.0 jdk安装配置 1.下载jdk(这里下载的是jdk-8u181-linux-x64.ta ...

  3. 【转】C#控件——DataGridView单元格文本自动换行

    源地址:https://www.cnblogs.com/wangshenhe/archive/2012/07/25/2608324.html DataGridView是.NET开发中常用的控件,在开发 ...

  4. 题解 P2613 【【模板】有理数取余】

    题目链接 我们先看这个式子: $c=\dfrac{a}{b}$ $ $ $ $ $mod$ $ $ $ $ $19260817$ 某正常高中生:这$……$ --- 对于这个 $c$ . 显然,它很可能 ...

  5. JavaWeb应用中初始化Log4j的两种方式

    本文主要介绍了普通JavaWeb应用(基于Tomcat)中初始化Log4j的两种方式: 1.通过增加 InitServlet ,设置令其自启动来初始化 Log4j . 2.通过监听器 ServletC ...

  6. 优化浏览器默认scroll样式小技巧

    一个最简单的页面: <!DOCTYPE html> <html> <head> <title>优化scroll</title> <me ...

  7. scrapy的 安装 及 流程 转

    安装 linux 和 mac 直接  pip install scrapy 就行 windows 安装步骤         a. pip3 install wheel       b. 下载twist ...

  8. Aop之使用Castle动态代理实现对方法的拦截

    using System; using System.Linq; using Castle.DynamicProxy; namespace AopTest { class AopTest { stat ...

  9. 1095 解码PAT准考证 (25 分)

    PAT 准考证号由 4 部分组成: 第 1 位是级别,即 T 代表顶级:A 代表甲级:B 代表乙级: 第 2~4 位是考场编号,范围从 101 到 999: 第 5~10 位是考试日期,格式为年.月. ...

  10. Nginx 安装--图片服务器搭建

    1.  nginx 需要依赖以下模块: gzip模块需要 zlib 库 rewrite模块需要 pcre 库 ssl 功能需要openssl库 1.1.安装pcre 1.         获取pcre ...