CSS样式设置之⽔平居中设置
　1.⽔平居中设置
  1.1 ⾏内元素
    我们在实际⼯作中常会遇到需要设置⽔平居中的场景，⽐如为了美观，⽂章的标题⼀般都是⽔平居中显⽰的。
  　这⾥我们⼜得分两种情况：还是，块状元素⾥⾯⼜分为定宽块状元素，以及不定宽块状元素。今天我们先来了解⼀下⾏内元素怎么进⾏⽔平居中？
    如果被设置元素为⽂本、图⽚等⾏内元素时，⽔平居中是通过给⽗元素设置text-align:center来实现的。(⽗元素和⼦元素：如下⾯的html代码中，div是“我想要在⽗容中⽔平居中显⽰”这个⽂本的⽗元素。反之这个⽂本是div的⼦元素 )如下代码：
    html代码：
      <body>
        <div class="txtCenter">我想要在⽗容器中⽔平居中显⽰。</div>
      </body>
    css代码：
      <style>
        .txtCenter{
          text-align:center;
        }
      </style>
  1.2 定宽块状元素
css实现垂直水平居中
    当被设置元素为时⽤ text-align：center 就不起作⽤了，这时也分两种情况：定宽块状元素和不定宽块状元素。
    这⼀⼩节我们先来讲⼀讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
    满⾜定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例⼦就是设置 div 这个块状元素⽔平居中：
    html代码：
      <body>
          <div>我是定宽块状元素，哈哈，我要⽔平居中显⽰。</div>
      </body>
    css代码：
        <style>
        div{
            border:1px solid red;/*为了显⽰居中效果明显为 div 设置了边框*/
            width:200px;/*定宽*/
        margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
        }
        </style>
    也可以写成：
      margin-left:auto;
      margin-right:auto;
    注意：元素的“上下 margin” 是可以随意设置的。
  1.3 不定宽块状元素⽅法
      在实际⼯作中我们会遇到需要为“不定宽度的块状元素”设置居中，⽐如⽹页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
      不定宽度的块状元素有三种⽅法居中（这三种⽅法⽬前使⽤的都很多）：
      （1）加⼊标签
      （2）设置⽅法：与第⼀种类似，显⽰类型设为⾏内元素，进⾏不定宽元素的属性设置
      （3）设置和 left:50%：利⽤相对定位的⽅式，将元素向左偏移 50% ，即达到居中的⽬的
    　第⼀种⽅法：
      　为什么选择⽅法⼀加⼊table标签? 是利⽤table标签的长度⾃适应性---即不定义其长度也不默认⽗元素body的长度（table其长度根据其内⽂本长度决定），因此可看做⼀个定宽度块元素，然后再利⽤定宽度块状居中的margin的⽅法，使其⽔平居中。
      第⼀步：为需要设置的居中的元素外⾯加⼊⼀个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
      第⼆步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的⽅法⼀样）。
      举例如下：
      html代码：
        <div>
        <table>
          <tbody>
            <tr><td>
            <ul>
                <li>我是第⼀⾏⽂本</li>
                <li>我是第⼆⾏⽂本</li>
                <li>我是第三⾏⽂本</li>
            </ul>
            </td></tr>
          </tbody>
        </table>
        </div>
      css代码：
        <style>
        table{
          border:1px solid;
          margin:0 auto;
        }
        </style>
    　第⼆种⽅法：改变块级元素的 display 为 inline 类型（设置为显⽰），然后使⽤text-align:center来实现居中效果。如下例⼦：
      html代码：
        <body>
          <div class="container">
            <ul>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
              </ul>
          </div>
        </body>
      css代码：
        <style>
        .container{
            text-align:center;
        }
        /* margin:0;padding:0（消除⽂本与div边框之间的间隙）*/
      　.container ul{
          list-style:none;
          margin:0;
          padding:0;
          display:inline;
      　}
      　/* margin-right:8px（设置li⽂本之间的间隔）*/
      　.container li{
          margin-right:8px;
          display:inline;
      　}
      　</style>
      这种⽅法相⽐第⼀种⽅法的优势是不⽤增加⽆语义标签，但也存在着⼀些问题：它将块状元素的 display 类型改为 inline，变成了⾏内元素，所以少了⼀些功能，⽐
如设定长度值。
      ⽅法三：通过给⽗元素设置，然后给⽗元素设置和 left:50%，⼦元素设置 position:relative 和 left: -50%来实现⽔平居中。
      我们可以这样理解：假想ul层的⽗层（即下⾯例⼦中的div层）中间有条平分线将ul层的⽗层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的⽗层（div层）的平分线对齐；⽽li层的css代码则是将li层的平分线与ul层的最左端（也是div层的      代码如下：
        <body>
        <div class="container">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </div>
        </body>
      css代码：
        <style>
        .container{
          float:left;
          position:relative;
          left:50%
        }
        .container ul{
            list-style:none;
            margin:0;
            padding:0;
            position:relative;
            left:-50%;
        }
        .container li{float:left;display:inline;margin-right:8px;}
        </style>
      这三种⽅法使⽤得都⾮常⼴泛，各有优缺点，具体选⽤哪种⽅法，可以视具体情况⽽定。  　

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。