水平居中

文本水平居中

  1. text-align:center

元素水平居中

块元素

margin:0 auto;
必须指定块元素的宽度，否则元素会占满允许的最大宽度。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #wrapper {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }

        #header,
        #footer {
            height: 98px;
            background-color: lightskyblue;
        }

        .main-left,
        .main-right {
            height: 380px;
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: hotpink;
        }

        .main-left {
            float: left;
            width: 595px;
        }

        .main-right {
            float: right;
            width: 195px;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="main">
            <div class="main-left"></div>
            <div class="main-right"></div>
            <div class="clear"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>

</html>

image.png

行内元素以及行内复合元素

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
      div {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div><strong>strong元素</strong></div>
    <div><span>span元素</span></div>
    <div><a href="http://www.lvyestudy.com">a元素</a></div>
  </body>

</html>

垂直居中

文本垂直居中

单行文本

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      div
      {
        width:200px;
        height:100px;
        line-height:100px;
        border:1px solid silver;
      }
    </style>
  </head>
  <body>
    <div>"从0到1"系列图书</div>
  </body>
</html>

多行文本

{
  display:table-cell;
  vertical-align:middle;
}
span{display:inline-block;}

一个 span 将所有的文本包含起来，然后定义为行内块元素类型，再使用该类型元素垂直居中的方式处理即可。

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      div
      {
        display:table-cell;
        vertical-align:middle;
        width:300px;
        height:150px;
        border:1px solid silver;
      }
      span{display:inline-block;}
    </style>
  </head>
  <body>
    <div>
      <span> 《从0到1 ：HTML+CSS快速上手》<br />
        《从0到1 ：CSS进阶之旅》<br />
        《从0到1 ：HTML5+CSS3修炼之道》
      </span>
    </div>
  </body>
</html>

元素的垂直居中

块元素

对于高度已知的块元素，使用 position 方式实现，使用 position 方法时，父元素和子元素都必须定义宽度和高度，具体做法是：首先给父元素写上 position:relative，这样做是为了确保给子元素添加 position:absolute 的时候不会被定位到“外太空”去，具体写法如下：

父元素
{
 position:relative;
}
子元素
{
 position:absolute;
 top:50%;
 left:50%;
 margin-top: "height值一半的负值";
 margin-left: "width值一半的负值";
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father {
            position: relative;
            width: 240px;
            height: 160px;
            border: 1px solid silver;
        }

        #son {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -60px;
            width: 120px;
            height: 60px;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>

</html>

这里要注意几点，首先是使用 relative 之后父子元素的位置，第二是子元素设置 margin 之后，中心点对应的位置，最后就是使用 margin 进行移动时候，百分比的值以及中心。

 对于 position 方法，我们还需要注意以下两点。position 方法可以用于所有元素，包括 inline、inline-block、block 等元素。 position 方法可以实现水平和垂直两个方向同时居中。如果想要单独实现水平居中，把 top 和 margin-top 这两个属性去掉即可；如果想要单独实现垂直居中，把 left 和 margin-left 这两个属性去掉即可。

行内块元素

{
 display:table-cell;
 vertical-align:middle;
}
子元素{vertical-align:middle;}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            display: table-cell;
            vertical-align: middle;
            width: 240px;
            height: 160px;
            border: 1px solid silver;
        }

        img {
            /* vertical-align: middle; */
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <img src="wu.jpg" alt="" />
    </div>
</body>

</html>

CSS Script

CSS Sprite，又称为“CSS 精灵”或者“CSS 雪碧图”，它将零散的小背景图合并成一张大的背景图，然后利用 background-position 属性进行背景定位，从而显示相应的小背景图。合并之后的大背景图，我们常称其为“雪碧图”。

首先将需要用到的图标合成为一张大图，然后使用 background-image 引入大背景图，结合 background-position 属性定位取出相应图标。减少了请求，但是增加了开发过程中的麻烦。

iconfont 图标

网站：https://www.iconfont.cn/

iconfont 技术image.png