注意：*在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. 【并行计算与CUDA开发】基于NVIDIA显卡的硬编解码的一点心得 （完结）

    原文:基于NVIDIA显卡的硬编解码的一点心得 (完结) 1.硬解码软编码方法:大体流程,先用ffmpeg来读取视频文件的包,接着开启两个线程,一个用于硬解码,一个用于软编码,然后将读取的包传给解码器 ...

  2. 「JOISC 2019 Day3」穿越时空 Bitaro

    「JOISC 2019 Day3」穿越时空 Bitaro 题解: ​ 不会处理时间流逝,我去看了一眼题解的图,最重要的转换就是把(X,Y)改成(X,Y-X)这样就不会斜着走了. ​ 问题变成二维平面上 ...

  3. SpringBoot异步编程

    异步调用:当我们执行一个方法时,假如这个方法中有多个耗时的任务需要同时去做,而且又不着急等待这个结果时可以让客户端立即返回然后,后台慢慢去计算任务.当然你也可以选择等这些任务都执行完了,再返回给客户端 ...

  4. elasticsearch 的post put 方式的对比 setting mapping设置 - 添加查询数据

    1.POST和PUT都可以用于创建 2.PUT是幂等方法,POST不是.所以post用户更新,put用于新增比较合适. 参考:https://yq.aliyun.com/articles/366099 ...

  5. [CF429E]Points ans Segments_欧拉回路

    Points and Segments 题目链接:www.codeforces.com/contest/429/problem/E 注释:略. 题解: 先离散化. 发现每个位置如果被偶数条线段覆盖的话 ...

  6. HDU 4417-Super Mario-线段树+离线

    Description Mario is world-famous plumber. His "burly" figure and amazing jumping ability ...

  7. VNote: 一个舒适的Markdown笔记软件

    Update: 支持macOSYunpan Update 2: 写在VNote半周岁 QQ群(487756074) Markdown标记语言一直是许多程序员的最爱.目前,有许多优秀的Markdown编 ...

  8. C#向远程地址发送数据

    static string proxyIpAddress = AppConfig.GetProxyIpAddress; static string proxyUserName = AppConfig. ...

  9. 怎样限制第三方Cookie

    使用Cookie的 SameSite 属性. 1. SameSite=Strict; 这个模式下, 服务器将会完全禁止第三方Cookie, 在跨站点时, 任何情况下都不会发送Cookie, 也就是说, ...

  10. JDK + Tomcat 安装 + 制作自定义镜像【第 2 篇 Tomcat】

    [第 1 篇 JDK]:https://www.cnblogs.com/del88/p/11842387.html[第 2 篇 Tomcat]:https://www.cnblogs.com/del8 ...