九、CSS居中-CSDN博客

本文链接：https://blog.csdn.net/weixin_45602227/article/details/117319598

本文详细讲解了如何在HTML中实现块元素水平和垂直居中，包括通过margin: 0 auto、绝对定位配合transform进行调整，以及针对行内元素、图片和文字的居中方法，如text-align、vertical-align和line-height的应用。

摘要由CSDN通过智能技术生成

一、块元素居中问题

		块元素居中问题
				1.由水平布局恒等式可以设置块元素水平居中。
				2.由于没有垂直布局恒等式，所以无法设置居中。

1.1 设置块元素在父元素中水平居中

<!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>

           #b1{
             width:200px;
             height:200px; 
             background-color: red;    
 
           } 

           #b2{
               width:50px;
               height:50px;
               background-color: blue;

               /** 设置元素在父元素中水平居中*/
               margin:0 auto;
           }

    </style>
</head>
<body>
    
   <div id="b1">
        <div id="b2"></div>
   </div>
    

</body>
</html>

在这里插入图片描述

二、设置绝对定位元素在父元素中居中

2.1 设置绝对定位元素在父元素中居中（绝对定位元素设置了宽高）

1）设置绝对定位元素在父元素中水平居中

<!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>

           #b1{
             width:200px;
             height:200px; 
             background-color: red;    
             position:relative;
           } 

           #b2{
               width:50px;
               height:50px;
               background-color: blue;
               position:absolute;

               /** 设置绝对定位元素在父元素中水平居中*/
               left:0px;
               right:0px;
               margin:0 auto;
           }

    </style>
</head>
<body>
    
   <div id="b1">
        <div id="b2"></div>
   </div>
    

</body>
</html>

在这里插入图片描述

2）设置绝对定位元素在父元素中垂直居中

<!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>

           #b1{
             width:200px;
             height:200px; 
             background-color: red;    
             position:relative;
           } 

           #b2{
               width:50px;
               height:50px;
               background-color: blue;
               position:absolute;

               /** 设置绝对定位元素在父元素中垂直居中*/
               top:0px;
               bottom:0px;
               margin:auto 0;
           }

    </style>
</head>
<body>
    
   <div id="b1">
        <div id="b2"></div>
   </div>
    

</body>
</html>

在这里插入图片描述

3）设置绝对定位元素在父元素中居中

<!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>

           #b1{
             width:200px;
             height:200px; 
             background-color: red;    
             position:relative;
           } 

           #b2{
               width:50px;
               height:50px;
               background-color: blue;
               position:absolute;

               /** 设置绝对定位元素在父元素中垂直居中*/
               left:0px;
               right:0px;
               top:0px;
               bottom:0px;
               margin:auto auto;
           }

    </style>
</head>
<body>
    
   <div id="b1">
        <div id="b2"></div>
   </div>
    

</body>
</html>

在这里插入图片描述

2.2 设置绝对定位元素在父元素中居中（绝对定位元素没有设置宽高）

1）设置绝对定位元素水平居中（元素无固定宽高）

<!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>变形</title>


    <style>

        .d{
            width:500px;
            height:500px;
            background-color: blue;
            position: relative;
        }

        .box{
       
            background-color: red;
            position:absolute;

            left:50%;
            transform: translateX(-50%);

        }
    </style>
</head>
<body>
   
    <div class="d">
        <div class="box">wewe</div>
    </div>
    
</body>
</html>

在这里插入图片描述

2）设置绝对定位元素垂直居中（元素无固定宽高）

<!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>变形</title>


    <style>

        .d{
            width:500px;
            height:500px;
            background-color: blue;
            position: relative;
        }

        .box{
       
            background-color: red;
            position:absolute;

            top:50%;
            transform: translateY(-50%);

        }
    </style>
</head>
<body>
   
    <div class="d">
        <div class="box">wewe</div>
    </div>
    
</body>
</html>

3）设置绝对定位元素在父元素中居中（元素无固定宽高）

<!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>变形</title>


    <style>

        .d{
            width:500px;
            height:500px;
            background-color: blue;

            position: relative;
        }

        .box{
            
            background-color: red;
            position: absolute;

            top:50%;
            left:50%;

            transform: translateX(-50%)  translateY(-50%);
        }
    </style>
</head>
<body>
   
    <div class="d">
        <div class="box">wewe</div>
    </div>
    
</body>
</html>

在这里插入图片描述

三、文字、行内元素、行内块元素、图片居中问题

2.1 设置【单行文字、行内元素、行内块元素、图片】水平居中

<!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>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;   

             /** 设置元素水平居中 */   
             text-align:center; 
           } 

           #b2{
             background-color: blue;    
           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           <span id="b2">xxxxxxxx</span> 
  </div>
    

</body>
</html>

在这里插入图片描述

2.2 设置【单行文字、行内元素、行内块元素、图片】垂直居中

>>>>>> 方式一：使用vertical-align来设置垂直居中

<!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>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;   

             /** 设置元素垂直居中 */  
             display: table-cell; 
             vertical-align: middle; 
           } 

           #b2{
             background-color: blue;    
           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           <span id="b2">xxxxxxxx</span> 
  </div>
    

</body>
</html>

在这里插入图片描述

>>>>>> 方式二：使用line-height来设置垂直居中

<!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>

           #b1{
              width:200px;
              height:200px; 
              background-color: pink;   
              line-height: 200px;;
           } 

           #b2{
               width:50px;
               height:50px;
               background-color: blue;    
               margin:0 auto;

           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           <span id="b2">xxxxx</span>
  </div>
    

</body>
</html>

在这里插入图片描述

2.3 设置【单行文字、行内元素、行内块元素、图片】居中

<!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>

           #b1{
             width:200px;
             height:200px; 
             background-color: pink;   

             /** 设置元素垂直居中 */  
             display: table-cell; 
             vertical-align: middle; 
             text-align: center;
           } 

           #b2{
             background-color: blue;    
           }
     
    </style>
</head>
<body>
    
   <div id="b1">
           <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="50px"  height="50px">
  </div>
    

</body>
</html>

在这里插入图片描述