CSS-div居中

Posted 2021-06-02 natsu-cc

前言：

---

css怎么将div居中显示，这个已经是老生长谈了，而且实现的方法也很多，这里就给大家列举其中一些方法。

div水平垂直居中：

---

flex 布局实现 （元素已知宽度）:

<div class="box">        
    <div class="item">flex</div>    
</div>

.box{            
    width: 300px;            
    height: 300px;           
    background-color: #ccc;            
    display: flex;                      
    justify-content: center;            
    align-items: center;        
}        
.box .item{            
    width: 100px;            
    height: 100px;            
    background-color: blue;        
}    

position （元素已知宽度）：

<div class="box">        
    <div class="item">position</div>    
</div>

.box{            
	width: 300px;            
 	height: 300px;            
 	background-color: #ccc;            
 	position: relative;        
}        
 .box .item{            
    width: 100px;            
    height: 100px;            
    background-color: blue;            
    position: absolute;            
    left: 50%;            
    top: 50%;            
    margin: -50px 0 0 -50px;        
}    

position transform （元素未知宽度）：

<div class="box">        
    <div class="item">transform</div>    
</div>

.box{            
    width: 300px;            
    height: 300px;            
    background-color: #ccc;            
    position: relative;        
}        
.box .item{            
    background-color: blue;            
    position: absolute;            
    top: 50%;            
    left: 50%;            
    transform: translate(-50%, -50%);        
}

position（元素已知宽度）（left，right，top，bottom为0，margin：auto ）:

<div class="box">
    <div class="item">position</div>
</div>

.box{            
  	width: 300px;            
    height: 300px;           
    background-color: #ccc;            
    position: relative;        
}        
.box .item{            
    width: 100px;            
    height: 100px;            
    background-color: blue;            
    position: absolute;            
    top: 0;            
    bottom: 0;            
    left: 0;            
    right: 0;            
    margin: auto;        
}    

table-cell 布局实现：

<div class="box">
    <div class="item">table-cell</div>
</div>

.box{            
  	width: 300px;            
    height: 300px;            
    background-color: #ccc;            
    display: table-cell;            
    vertical-align: middle;     
}        
.box .item{            
    margin-left: 100px;            
    width: 100px;            
    height: 100px;            
    background-color: blue;   
}    

内容（文字，图片）水平垂直居中：

---

• text-align : center 给元素的父级加，可以使文本或者行级元素(例如：图片)水平居中。
• line-height : 值为元素的高度，可以使元素的文本内容垂直居中。
• margin: 0 auto 使用条件：父级元素宽度可有可无，子级元素必须使块元素，而且要有宽度（否则继承父级）。
• display：table-cell 会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。

display：table-cell 使用注意：

• 不要与 float：left， position : absolute， 一起使用
• 可以实现大小不固定元素的垂直居中
• margin 设置无效，响应 padding 设置
• 对高度和宽度高度敏感
• 不要使用百分比设置宽度和高度
  
  

文字水平垂直居中：

<div class="box">table-cell</div>

.box{            
   width: 300px;            
   height: 300px;            
   background-color: blue;            
   display: table-cell;            
   text-align: center;/*使元素水平居中 */            
   vertical-align: middle;/*使元素垂直居中 */        
}    

图片水平垂直居中：

<div class="box">    
    <img src="test.jpg" alt="">
</div>

.box{            
  width: 300px;            
    height: 300px;            
    background-color: skyblue;            
    display: table-cell;            
    text-align: center;            
    vertical-align: middle;        
}        
img{            
    /* 设置成块元素后，text-align：center 就会失效 */            
    width: 100px;            
    height: 100px;        
}