HTML，css居中问题

最新推荐文章于 2021-06-17 12:18:16 发布

~嘘~禁止想象~

最新推荐文章于 2021-06-17 12:18:16 发布

阅读量243

点赞数 2

本文链接：https://blog.csdn.net/weixin_45773503/article/details/104349822

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

HTML and CSS

32 篇文章 2 订阅

订阅专栏

margin的auto属性的作用是用来分配剩余空间

例：图片设置margin: 0 auto是无效的，因为图片是内联元素，不是占一整行，没有剩余空间。因为垂直方向没有剩余空间。

A. 文本居中

令height = line-height 垂直方向居中
text-align：父级的text-align，水平方向居中

注: text-align：center ；只是将子元素里的内联元素居中，如果不是内联元素就要用到 margin： 0 auto；

B. 水平方向居中（三种）

实现下面这个效果：
在这里插入图片描述

1. 父元素定宽，子元素设置`margin: 0 auto；`

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: rgb(20, 6, 20);
        }
        
        .son {
        	margin: auto;						//important
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>


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

2. 在子元素将display设置为inline-block,父元素text-algin设置为center

    <style>
        .father {
        	text-align: center;  				 //important
        	
            width: 200px;
            height: 200px;
            background-color: rgb(20, 6, 20);
        }
        
        .son {
        	display: inline-block; 				 //important
        	
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>


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

3. flex实现

        .father {
            display: flex;				//important
            justify-content: center;	//important
            
            background-color: black;
            width: 200px;
            height: 200px;

        }
        
        .son {
            width: 50px;
            height: 50px;
            background-color: yellow;
        }


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

C. 垂直方向居中（三种）

实现下面这个效果：
在这里插入图片描述

方法一：

父元素设置 position：relative；
子元素设置 position: absolute; top: 0； bottom: 0;
并设置子元素margin: auto;这个very important

    <style>
        .father {
        	position: relative;				//important
        	
            width: 200px;
            height: 200px;
            background-color: rgb(20, 6, 20);
        }
        
        .son {
            margin: auto;					//important
            position: absolute;				//important
            top: 0;							//important
            bottom: 0;						//important
            
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>

原理：
1.在普通内容流中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

2.position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时绝对定位部分不进行渲染。

3.为块区域设置top: 0; left: 0; bottom: 0; right: 0;浏览器将给该块重新分配一个边界框，此时该块将填充其父元素的所有可用空间，所以margin 垂直方向上有了可分配的空间。

4.再设置margin 垂直方向上下为auto，即可实现垂直居中。（注意高度得设置）。
.
.

方法二：position+transform: translateY(-50%)

    <style>
        /* 背景左右居中 */
        
        .father {
            position: relative; 			//important
            
            background-color: black;
            width: 200px;
            height: 200px;
        }
        
        .son {
            position: absolute;				//important
            top: 50%;						//important
            transform: translateY(-50%);	//important
            
            background-color: yellow;
            width: 50px;
            height: 50px;
        }
    </style>


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

原理：

top: 50%;将上边框移动到中间位置；
transform: translateY(-50%);向上移动自身高度的50%；
imagine it ！！！

方法三：flex;

    <style>
        .father {
            display: flex;					//important
            align-items: center;			//important
            
            background-color: black;
            width: 200px;
            height: 200px;
        }
        
        .son {
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>
    
    
    <body>
    	<div class="father">
     	   <div class="son"></div>
    	</div>
	</body>

D. 水平垂直居中（三种）

在这里插入图片描述

方法一：flex实现：结合水平垂直居中的功能即可

    <style>
        .father {
            display: flex;								//important
            justify-content: center;					//important
            align-items: center;						//important
            
            background-color: black;
            width: 200px;
            height: 200px;
        }
        
        .son {
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>
    
	<body>
    	<div class="father">
     	   <div class="son"></div>
    	</div>
	</body>

方法二：position定位

    <style>
        .father {
            position: relative;
            
            background-color: black;
            width: 200px;
            height: 200px;
        }
        
        .son {
            position: absolute;			//important
            top: 0;						//important
            bottom: 0;					//important
            right: 0;					//important
            left: 0;					//important
            margin: auto;				//important
            
            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>


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

方法三：position+transform

    <style>
        .father {
            position: relative;
            
            background-color: black;
            width: 200px;
            height: 200px;
        }
        
        .son {
            position: absolute;
            right: 50%;										//右边界相对父容器在中间
            bottom: 50%;									//下边界相对父容器在中间
            transform: translateX(50%) translateY(50%); 	//向右移动自身宽度的50%，向下移动自身高度的50%

            width: 50px;
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>

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