关于css各类居中的区分与用法

最新推荐文章于 2022-06-14 11:17:58 发布

违规昵称001

最新推荐文章于 2022-06-14 11:17:58 发布

阅读量266

点赞数

分类专栏： css 文章标签： css 居中水平居中垂直居中

本文链接：https://blog.csdn.net/m0_37528005/article/details/78250600

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

关于css各类居中的区分与用法
关于居中我们在平时的开发中都会经常用到，我个人是碰到需要居中的情况想到一种方法就随手一用，但有时候不管怎么设置都没有这个居中效果，所以特地学习了一下css各类居中的方法，包括水平居中和垂直居中。

水平居中

要设置水平居中的元素，首先我们要把元素划分一下类别：

1.行内元素
如a,b,span,img,label,button,input,textarea等。

2.块状（级）元素：定宽块状元素，不定宽块状元素。
如div,header,form,ul,ol,table,article,h1-6,aside,footer等。

（其中定宽块状元素是指元素已明确设置了宽度，且不会再随浏览器及窗口的变化而变化等类型的元素。

不定宽块状元素是指没有设置宽度或者设置为百分比宽度等不固定宽的元素）

水平居中方法：
1.行内元素
如果对象为 文字、图片、或者其他行内元素（如上举例） 时，为其父元素设置text-align:center;即可。
下面举一个例子

<!-- -------举例：文字、图片、行内元素button居中----------------->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father{
        text-align: center;
        width:300px;
        height: 100px;
        border: 1px solid pink;/*设置边框更清楚地看出居中；*/
    }
    </style>
</head>
<body>
    <div class="father">
        这段文字相当于一个行内元素
        <button>Click me </button>
    </div>
</body>
</html>
<!-- 这个例子中div是父级元素，我们将文字设为居中，只需要在这个div中设置即可，图片也是一样。-->

效果如下：（也可以把文字删除，单独试button。）
这里写图片描述

2.块级元素
有定宽和不定宽两种，定宽可以直接使用 margin：0 auto；（上下值可以不为零，也可以写为margin-left:auto;
margin-right:auto;）为要设置居中的元素本身加上这一属性；
栗子：

<!-- 定宽块级元素，为<div class="fixWidth";></div>设置margin：0 auto; 假设把这里的width: 300px;换为了width:30%等百分比或不确定宽度，就不会有居中的效果了！-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father{
        width:500px;
        height: 100px;
        border: 1px solid pink; 
    }
      .fixWidth{
        width: 300px;
        height:50px;
        background-color: red;
        margin: 0 auto;
      }
    </style>
</head>
<body>
    <div class="father">    
      <div class="fixWidth">
      </div>
    </div>
</body>
</html>

效果：
这里写图片描述

不定宽块级元素，有三种方法：第一种是在不定宽块级元素的外面加上table标签，使它变为定宽块级元素，第二种是利用display: inline，第三种是利用定位，下面用例子来说明：

<!-- 不定宽块级元素设置水平居中，方法一：1.在需要设置的元素外层加上table标签（因为table的宽度由它本身的内容决定，所以可以看作一个定宽块状元素），2.为table设置margin：0 auto即可-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    table{
        border: 1px solid green;
        margin: 0 auto;
    }
      .unFixWidth{
        background-color: red;
      }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <div class="unFixWidth">
           将unFixWidth设置为水平居中吧！
           </div>
        </td>
    </tr>
</table>
</body>
</html>

效果如下：
这里写图片描述

<!-- 不定宽块级元素设置水平居中，方法二：将要居中的元素变为行内元素，然后按照行内元素在父元素中设置text-align：center；即可-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father{
        width: 600px;
        height: 200px;
        border: 1px solid green;
        text-align: center;
    }
      .unFixWidth{
        display: inline;
        background-color: red; 
      }
    </style>    
</head>
<body>
 <div class="father">
          <div class="unFixWidth">
           将unFixWidth设置为水平居中吧！
           </div>
 </div>
</body>
</html>

效果：
这里写图片描述

<!-- 不定宽块级元素设置水平居中，方法三：1.为父元素设置float: left;position: relative;left: 50%; 2.为要居中的元素设置  position: relative; left: -50%;-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father{
        width: 600px;
        height: 200px;
        border: 1px solid green;
        float: left;
        position: relative;
        left: 50%;
    }
      .unFixWidth{
       position: relative;
       left: -50%;
        background-color: red; 
      }
    </style>    
</head>
<body>
 <div class="father">
          <div class="unFixWidth">
           将unFixWidth设置为水平居中吧！
           </div>
 </div>
</body>
</html>

效果：
这里写图片描述

垂直居中

垂直居中有两种情况：父元素高度确定的单行文本、父元素高度确定的多行文本。

1.父元素高度确定的单行文本

<!-- 父元素高度确定的单行文本，可利用height和line-height来达到垂直居中的效果-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     .center{
       height:100px;
       line-height: 100px;
        background-color: red; 
      }
    </style>    
</head>
<body>
          <div class="center">
           将unFixWidth设置为垂直居中吧！              
           </div>
</body>
</html>

效果：
父元素高度确定的单行文本
但是如果多行文本，再用这个方法就不可行了，如下图，溢出
这里写图片描述

2.父元素高度确定的多行文本
方法一：使用vertical-align:middle配合display：table-cell

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .centerText{
        width:500px;
        height:100px; 
        background-color: red; 
        display: table-cell;
        vertical-align: middle;
      }
    </style>
</head>
<body>
          <div class="centerText">
           将我设置为垂直居中吧！  
           将我设置为垂直居中吧！ 
           将我设置为垂直居中吧！
            将我设置为垂直居中吧！              
           </div>
</body>
</html>

效果：
这里写图片描述

方法二：可以使用table标签来达到垂直居中的效果

<!-- 在div外层套入table、tr、td -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .centerText{
        height:100px;
        line-height: 100px;
        background-color: red; 
      }
    </style>    
</head>
<body>
    <table>
        <tr>
            <td>
                <div class="centerText">
               将我设置为垂直居中吧！
               将我设置为垂直居中吧！
               将我设置为垂直居中吧！
               将我设置为垂直居中吧！       
                </div>
            </td>
        </tr>
    </table>          
</body>
</html>