CSS 水平居中

时间 2019-11-24

标签 css 水平居中栏目 CSS 繁體版

原文原文链接

你不知道的那些事:

一、absolute：

相对最近的除了position：static以外的父元素偏移。默认：停留在父元素的content区域内！！

可是！！！其实absolute的~~活动区域是父元素的padding+content~~，并不只限于父元素，只是起点在父元素内的左上角。设置left：0，top:0;就发现和默认的不一致了！！！（默认不等同于left：0；top:0;）浏览器

因此，当你发现下文中提到的left:50%;它是父元素padding+content长度的50%！！切记！！！布局

二、relative：

相对本身原来的位置偏移。活动范围是~~父元素的content区域~~，这句话说得不对，活动范围没人能拦得住它，并不只限于父元素，可是当偏移量取值是百分比时，就是相对父元素的content取值了好比left：50%也就是父元素的content的50%。code

三、fixed：

相对可视窗口偏移。活动范围是整个可视窗口，left：50%通常也就是浏览器可视窗口的50%啦。blog

正文:

1. 行内元素text-align:center

若是被设置元素为文本、图片等行内元素时，水平居中是经过给父元素设置 text-align:center 来实现的。图片

<body>
      <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
<style>
  .txtCenter{
    text-align:center;
  }
</style>

2. 定宽块状元素

a. 设置“左右margin”值为“auto”来实现居中的。it

<body>
      <div>我是定宽块状元素，哈哈，我要水平居中显示。
</div>
</body>         
<style>
     div{  
     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/    
     width:200px;/*定宽*/
     margin:20px auto;/*margin-left 与 margin-right 设置为 auto */
 }
</style>

也能够写成：io

margin-left:auto;
  margin-right:auto;

注意：元素的“上下 margin” 是能够随意设置的。
分析：
一、此方法居中只适用于占满一行的块状元素，不适用于inline-block。设置width只是content的宽度，加上padding、border和margin之后的整个块占满一行，所以设置margin auto可使之居中。因此float浮动元素也不适用该方法。
二、absolute/fixed状况时，设置left:0,right:0;就能够把margin扯大啦！！（千万记得设置宽度，否则就不是把margin扯大而是把content扯大啦！）
三、IE6下需在父元素上设置text-align: center;,再给子元素恢复须要的值。table

b. 设置元素为absolute/relative/fixed，（1）偏移量（left或者right）设置为50%，（2）margin设置为元素宽度一半乘以-1。ast

<body>
    <div class="content"> aaaaaa aaaaaa a a a a a a a a </div>
</body>
  <style>
   body {
      position: relative;
   }
   .content {
      width: 800px;
      position: absolute;
      left: 50%;
      margin-left: -400px;
  }
 </style>

注意此时absolute是在父元素的padding+content中居中，50%是父元素padding+content的50%；
relative是在父元素的content中居中，50%是父元素的content的50%；
fixed是视图居中，50%是可视窗口的50%，因此适用想要在浏览器居中的状况。class

3. 不定宽块状元素方法

（1）加入 table标签+左右 margin 居中

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

（2）设置 display:inline或者inline-block +父元素text-align:center

<body>
     <div class="container">
        <ul>
          <li><a href="#">1</a></li>
        </ul>
    </div>
</body>
<style>
  .container{
      text-align:center;
  }
  .container ul{
      list-style:none;
      margin:0;
      padding:0;
      display:inline-block;
  }
 </style>

（3）设置 position:relative 和 left:50%
前文提到的position和移动50%的方案都是基于定宽的，由于若是不定宽，就会被扯大！！毁掉了咱们的布局！
有些同窗说我就是不想设定宽度，也不想加table，也不想把块状元素变成行内元素怎么办？
当当当！！
给本身添加一层父元素，让父元素牢牢的抱（包）住本身（给父元素设置float或者inline-block），使得父元素和本身同样宽，而后给父元素设置relative和 left:50%，让父亲带着本身飞，飞多远呢？答：飞父亲的父亲也就是爷爷的content的50％。而后子元素设置 position:relative 和 left: -50% 本身单飞，这个时候飞父亲的50%，其实也就是本身的50%，由于本身和父亲同样大。从而来实现水平居中。

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
    </ul>
</div>
</body>
<style>
.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
}
</style>