如何居中一个元素

蔚落 2022-05-28 01:43 171阅读 0赞

# 转自：[如何居中一个元素][Link 1] #

# 题目点评 #

这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。可以先把水平居中各种情况说清楚，然后在把垂直居中说清楚。

# （一）元素水平居中的方式 #

1）行级元素水平居中对齐（父元素设置 text-align:center）

**\[html\]**  [view plain][]  [copy][view plain]

1.  <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">    
2.      <span>行级元素垂直居中</span>     
3.  </div>

![20160926161339890][]

2)   块级元素水平居中对齐（margin: 0 auto）

**\[html\]**  [view plain][]  [copy][view plain]

1.   <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">  
2.       <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 块级元素水平居中</div>  
3.  </div>

![20160926161626225][]

3）浮动元素水平居中

*  宽度不固定的浮动元素

> html代码

> **\[html\]**  [view plain][]  [copy][view plain]
> 
> 1.  <div class="outerbox">  
> 2.   <div class="innerbox">我是浮动的</div>  
> 3.  </div>  
> 
> CSS样式
> 
> **\[css\]**  [view plain][]  [copy][view plain]
> 
> 1.  .outerbox\{  
> 2.  float:left;   
> 3.  position:relative;   
> 4.  left:50%;   
> 5.  \}   
> 6.  .innerbox\{    
> 7.  float:left;   
> 8.  position:relative;   
> 9.  right:50%;   
> 10. \}  
> 
> ![20160926172110063][]

*  宽度固定的互动元素

> html代码

> **\[html\]**  [view plain][]  [copy][view plain]
> 
> 1.  <div class="outerbox">  
> 2.     <div>我是浮动的</div>  
> 3.  </div>  
> 
> css代码
> 
> **\[css\]**  [view plain][]  [copy][view plain]
> 
> 1.  .outerbox\{  
> 2.      background-color:pink; /\*方便看效果 \*/    
> 3.      width:500px ;   
> 4.      height:300px; /\*高度可以不设\*/  
> 5.      margin: \-150px 0 0 \-250px; /\*使用marin向左移动250px，保证元素居中\*/  
> 6.      position:relative;   /\*相对定位\*/  
> 7.      left:50%;  
> 8.      top:50%;  
> 9.  \}  
> 
> ![20160926172222172][]

4）让绝对定位的元素水平居中对齐

>   这种方式非常独特，大家一定要记牢这种方式，会用这种方式的薪资待遇必然高出几千¥

> **\[css\]**  [view plain][]  [copy][view plain]
> 
> 1.  .center\{  
> 2.           position: absolute; /\*绝对定位\*/  
> 3.           width: 500px;  
> 4.           height:300px;  
> 5.           background: red;  
> 6.           margin: 0 auto; /\*水平居中\*/  
> 7.           left: 0; /\*此处不能省略，且为0\*/  
> 8.           right: 0; /\*此处不能省略，且为0\*/  
> 9.  \}  
> 
>   
> 经验分享： 水平居中的主要属性有

> 1. text-alin:center;
> 
> 2. margin:0 auto
> 
> 3. position:relative|absolute; left:50%;

# （二）元素垂直居中对齐 #

1）对行级元素垂直居中（heiht与line-height的值一样）

**\[css\]**  [view plain][]  [copy][view plain]

1.  height:300px;  
2.  line-height:300px;

> ![20160926161043546][]

> 2）对 块级元素垂直居中对齐

> 2.1 父元素高度固定的情况

> > 1）父元素的height与line-height值相同
> 
> > 2）需要垂直居中的元素
> 
> >  vertical-align:middle;// 垂直居中对齐
> 
> >  display:inline|inline-block 块级元素转行级元素

> > HTML代码
> > 
> > **\[html\]**  [view plain][]  [copy][view plain]
> > 
> > 1.  <div class="center">  
> > 2.      <div class="inner"></div>  
> > 3.  </div>

> > CSS代码

> > **\[css\]**  [view plain][]  [copy][view plain]
> > 
> > 1.  .center\{  
> > 2.      width: 500px;  
> > 3.      height:300px;  
> > 4.      line-height: 300px;  
> > 5.      border:1px solid;  
> > 6.  \}  
> > 7.   .inner\{  
> > 8.       background: blue;  
> > 9.       width: 300px;  
> > 10.      height: 100px;  
> > 11.      display: inline-block;  
> > 12.      vertical-align: middle;  
> > 13.  \}

> 2.2 父元素高度不固定的情况

> >  父元素的padding-top和padding-bottom一样

\--------------------------------------------------------------------------------------------------------------------

[Link 1]: https://blog.csdn.net/lxcao/article/details/52670724
[view plain]: https://blog.csdn.net/lxcao/article/details/52670724#
[20160926161339890]: /images/20220528/6ce501f014304c1b9e58cb2d161c3a16.png
[20160926161626225]: /images/20220528/97f7e958892a40ff9800533fd47131c5.png
[20160926172110063]: /images/20220528/3a6741008c5b4172b3826cd7475657ca.png
[20160926172222172]: /images/20220528/760762f151e44bdb83890711b5d0befe.png
[20160926161043546]: /images/20220528/1e103f47ec5f44b383a09d620eaec5ca.png