CSS中垂直居中的方法

太过爱你忘了你带给我的痛 2023-07-13 03:54 14阅读 0赞

## CSS中垂直居中的方法 ##

1.  margin：auto；方法
    
    CSS：
    
        div{
        	width: 800px;
        	height: 800px;
        	position: relative;
        	background: skyblue;
        	border: 0.5px black solid;
        }
        img{
        	position: absolute;
        	margin: auto;
        	top: 0;
        	left: 0;
        	right: 0;
        	bottom: 0;
        }
    
    HTML：
    
        <div id="">
        	<img src="../img/jishu.png" >
        </div>
    
    定位上下左右为0，margin：0；可以实现脱离文档流中的居中 。  
    网页显示如下：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ_size_16_color_FFFFFF_t_70][]
2.  table-cell（未脱离文档流的）
    
    CSS：
    
        div{
        	width: 800px;
        	height: 800px;
        	background: blue;
        	border: 0.5px black solid;
        	display: table-cell;
        	vertical-align: middle;
        	text-align: center;
        }
        img{
        	vertical-align: middle;
        }
    
    HTML：
    
        <div id="">
        	<img src="../img/jishu.png" >
        </div>
    
    设置父元素display: table-cell;，并且vertical-align: middle;，这样子元素可以实现垂直居中。  
    网页显示如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ_size_16_color_FFFFFF_t_70 1]
    
    3.利用flex
    
    将父元素设置为display: flex;，并且设置align-items: center;和justify-content: center;。可实现子元素的垂直居中。
    
    CSS：
    
        div{
        	width: 800px;
        	height: 800px;
        	background: grey;
        	border: 0.5px black solid;
        	/* display: -webkit-flex; */
        	display: flex;
        	/* -webkit-align-items: center; */
        	align-items: center;
        	/* -webkit-justify-content: center; */
        	justify-content: center;
        	}
    
    HTML：
    
        <div id="">
        			<img src="../img/jishu.png" >
        </div>

网页显示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310132826193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200310132908469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200310132932287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RPTkdfX0NISQ==,size_16,color_FFFFFF,t_70