注意：*在IE中并不代表通配符的意思，是代表根元素的意思，所以为了匹配适应各种浏览器，进行页面初始化

  1.  <style>
  2.     *{
  3.      margin:0;
  4.      padding:0;
  5.       }
  6.  </style>

用以下形式代替

  1.  <style>
  2.     html,body{
  3.      margin:0;
  4.      padding:0;
  5.       }
  6.  </style>

1.盒子居中 margin:0 auto;

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          html,body{
  8.              margin: 0;
  9.              padding: 0;
  10.          }
  11.          .container{
  12.              width: 100%;
  13.              min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
  14.              height: 70px;
  15.              background-color: aquamarine;
  16.          }
  17.          .header{
  18.              width: 80%;
  19.              height: 70px;
  20.              background-color: blueviolet;
  21.              min-width: 996px;
  22.          }
  23.      </style>
  24.  </head>
  25.  <body>
  26.      <div class="container">
  27.          <div class="header"></div>
  28.      </div>
  29.  </body>
  30.  </html>

设置margin:0 auto;让盒子居中

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          html,body,ul{
  8.              margin: 0;
  9.              padding: 0;
  10.          }
  11.          .container{
  12.              width: 100%;
  13.              min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
  14.              height: 70px;
  15.              background-color: aquamarine;
  16.          }
  17.          .header{
  18.              width: 80%;
  19.              height: 70px;
  20.              background-color: blueviolet;
  21.              min-width: 996px;
  22.              margin:0 auto;    /*上下为0，左右为自适应*/
  23.          }
  24.      </style>
  25.  </head>
  26.  <body>
  27.      <div class="container">
  28.          <div class="header">
  29.          </div>
  30.      </div>
  31.  </body>
  32.  </html>

2.文字居中 line-height;text-align:center;

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          html,body,ul{
  8.              margin: 0;
  9.              padding: 0;
  10.          }
  11.          .container{
  12.              width: 100%;
  13.              min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
  14.              height: 70px;
  15.              background-color: aquamarine;
  16.          }
  17.          .header{
  18.              width: 80%;
  19.              height: 70px;
  20.              background-color: blueviolet;
  21.              min-width: 996px;
  22.              margin:0 auto;    /*上下为0，左右为自适应*/
  23.          }
  24.          ul li{
  25.              display: inline-block;/*内联块级元素和其他元素都在一行上*/
  26.              list-style-type: none;
  27.          }
  28.      </style>
  29.  </head>
  30.  <body>
  31.      <div class="container">
  32.          <div class="header">
  33.              <ul>
  34.                  <li>列表项目</li>
  35.                  <li>列表项目</li>
  36.                  <li>列表项目</li>
  37.                  <li>列表项目</li>
  38.              </ul>
  39.          </div>
  40.      </div>
  41.  </body>
  42.  </html>

line-height;text-align:center;设置文字居中

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          html,body,ul{
  8.              margin: 0;
  9.              padding: 0;
  10.          }
  11.          .container{
  12.              width: 100%;
  13.              min-width: 996px;/*设置最小宽度，缩小到最小宽度996px的时候就不再压缩内容了*/
  14.              height: 70px;
  15.              background-color: aquamarine;
  16.          }
  17.          .header{
  18.              width: 80%;
  19.              height: 70px;
  20.              background-color: blueviolet;
  21.              min-width: 996px;
  22.              margin:0 auto;    /*上下为0，左右为自适应*/
  23.              text-align: center;/*水平居中*/
  24.  
  25.          }
  26.          ul{
  27.              line-height: 70px;/*垂直居中*/
  28.          }
  29.          ul li{
  30.              /*float: left;*//*会脱离文档流，这时不能用text-align: center;设置水平居中*/
  31.              display: inline-block;/*内联块级元素和其他元素都在一行上*/
  32.              list-style-type: none;
  33.          }
  34.      </style>
  35.  </head>
  36.  <body>
  37.      <div class="container">
  38.          <div class="header">
  39.              <ul>
  40.                  <li>列表项目</li>
  41.                  <li>列表项目</li>
  42.                  <li>列表项目</li>
  43.                  <li>列表项目</li>
  44.              </ul>
  45.          </div>
  46.      </div>
  47.  </body>
  48.  </html>

3.由table演变来的一种居中

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .t{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: aquamarine;
  11.          }
  12.      </style>
  13.  </head>
  14.  <body>
  15.      <div class="t">
  16.          <p>哈哈</p>
  17.      </div>
  18.  </body>
  19.  </html>

用table设置水平垂直居中

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .t{
  8.              display: table;/*外层div变为table*/
  9.              width: 200px;
  10.              height: 200px;
  11.              background-color: aquamarine;
  12.          }
  13.          p{
  14.              display: table-cell;/*设置为单元格*/
  15.              text-align: center;/*水平居中*/
  16.              vertical-align: middle;/*垂直居中*/
  17.          }
  18.      </style>
  19.  </head>
  20.  <body>
  21.      <div class="t">
  22.          <p>哈哈</p>
  23.      </div>
  24.  </body>
  25.  </html>

4.利用伸缩盒居中

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .outer{
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: aquamarine;
  11.          }
  12.          .inner{
  13.              width: 100px;
  14.              height: 100px;
  15.              background-color: antiquewhite;
  16.          }
  17.      </style>
  18.  </head>
  19.  <body>
  20.      <div class="outer">
  21.          <div class="inner">
  22.              哈哈
  23.          </div>
  24.      </div>
  25.  </body>
  26.  </html>

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .outer{
  8.              display: -webkit-box;/*设置为盒子*/
  9.              width: 200px;
  10.              height: 200px;
  11.              background-color: aquamarine;
  12.              -webkit-box-pack:center;/*水平居中*/
  13.              -webkit-box-align:center;/*垂直居中*/
  14.          }
  15.          .inner{
  16.              width: 100px;
  17.              height: 100px;
  18.              background-color: antiquewhite;
  19.          }
  20.      </style>
  21.  </head>
  22.  <body>
  23.      <div class="outer">
  24.          <div class="inner">
  25.              哈哈
  26.          </div>
  27.      </div>
  28.  </body>
  29.  </html>

接下来设置文字居中

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          .outer{
  8.              display: -webkit-box;/*设置为盒子*/
  9.              width: 200px;
  10.              height: 200px;
  11.              background-color: aquamarine;
  12.              -webkit-box-pack:center;/*水平居中*/
  13.              -webkit-box-align:center;/*垂直居中*/
  14.          }
  15.          .inner{
  16.              display: -webkit-box;/*设置为盒子*/
  17.              -webkit-box-pack:center;/*水平居中*/
  18.              -webkit-box-align:center;/*垂直居中*/
  19.              width: 100px;
  20.              height: 100px;
  21.              background-color: antiquewhite;
  22.          }
  23.      </style>
  24.  </head>
  25.  <body>
  26.      <div class="outer">
  27.          <div class="inner">
  28.              哈哈
  29.          </div>
  30.      </div>
  31.  </body>
  32.  </html>

CSS基础学习 21.CSS居中总结的更多相关文章

  1. CSS基础学习 20.CSS媒体查询

  2. CSS基础学习 19.CSS hack

  3. CSS基础学习 18.CSS多列

    四种常见的浏览器内核:

  4. CSS基础学习 17.CSS动画

  5. CSS基础学习 16.CSS过渡

  6. CSS基础学习-15-1.CSS 浏览器内核

  7. CSS基础学习-14 CSS visibility与overflow属性

  8. CSS基础学习-13.CSS 浮动

    如果前一个元素设置浮动属性,则之后的元素也会继承float属性,我觉得这里说是继承不太对,可以理解为会影响到之后的元素,所以在设置浮动元素之后的元素要想不被影响就需要清除浮动.元素设置左浮动,则清除左 ...

  9. CSS基础学习-12.CSS position

    绝对定位 position:absolute,元素脱离文档流,然后使用left.right.top.bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位.如果不存在这样的祖先元素,则 ...

随机推荐

  1. 在VMware上部署MOS（MirantisOpenStack-6.0）搭建全过程

    安装清单 MOS9.0系统镜像 1 MirantisOpenStack-6.0.iso ****首先创建3个仅主机模式网卡, 禁用DHCP,分别配置ip为 /10.20.0.0 /172.16.0.0 ...

  2. Minimizing Difference 【思维】

    题目链接: https://vjudge.net/contest/336389#problem/B 题目大意: 给出一个长度为n的数列以及操作次数k.k的范围为1e14.每次操作都可以选择给任意一个数 ...

  3. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  4. 小米Python后端面试题

    电话面 时长:30m 说一下对浏览器缓存的理解: 说一下MySQL优化: 说一下redis: 说一下从输入url到返回都发生了什么: 域名怎么解析的: 一面 1h 编程实现翻转单链表: MySQL中v ...

  5. 关于springboot的日志logging.file和logging.path的配置问题

    springboot日志配置 logging.path  logging.file 它们俩不会同时生效,so只配置其中一个就好了. eg1: 单独一个path配置 logging.path=E:/lo ...

  6. JDBC 资源绑定器 ，处理查询结果集

    使用资源绑定器绑定属性配置 实际开发中不建议把连接数据库的信息写死到Java程序中 //使用资源绑定器绑定属性配置 ResourceBundle bundle = ResourceBundle.get ...

  7. Java实现无向图的建立与遍历

    一.基于邻接矩阵表示法的无向图 邻接矩阵是一种利用一维数组记录点集信息.二维数组记录边集信息来表示图的表示法,因此我们可以将图抽象成一个类,点集信息和边集信息抽象成类的属性,就可以在Java中描述出来 ...

  8. （四）Spring 的 bean 管理（注解方式）

    目录 前言 使用 aop 的配置文件写法 开启注解扫描 利用注解创建对象 注解方式注入属性 配置文件和注解混合使用 前言 注解可以写在 类.方法.属性 上 : 使用 注解,需要导入 aop 包: 使用 ...

  9. PHP学习之PHP编码习惯

    命名的注意事项: 命名要有实际含义 命名风格保持一致 不用拼音命名 不用语言关键字 适当的使用注释 好的代码应该是自描述的 难以理解的地方加上注释 函数的功能加上注释说明 类的功能和使用方法加注释 多 ...

  10. matplotlib 画图中的basemap安装问题

    在我用matplotlib画图是会用到,basemap这个库,但是直接安装却会出现问题: 使用这条安装命令就能够安装功能了: conda install -c conda-forge basemap= ...