CSS水平垂直居中总结(初学者必看篇)

2020-10-17 07:53 jianzhan

行内元素

假如被设定元素为文字、照片等行内元素时,水平垂直居中是根据给父元素设定 text-align:center 来完成的。

html编码:

XML/HTML Code拷贝內容到剪贴板
  1. <body>    
  2.   
  3. <div class="txtCenter">我要想在父器皿中水平垂直居中显示信息。</div>    
  4.   
  5. </body>  

css编码:

CSS Code拷贝內容到剪贴板
  1. <style>     
  2.   
  3. .txtCenter{   
  4.   
  5.     text-align:center;     
  6.   
  7. }    
  8.   
  9. </style>  

块状元素

定宽块状元素

定宽块状元素:块状元素的宽度width为固定不动值。

考虑定宽和块状两个标准的元素是能够根据设定“上下margin”值为“auto”来完成垂直居中的。

html编码:

XML/HTML Code拷贝內容到剪贴板
  1. <body>     
  2.   
  3. <div>我是定宽块状元素,哈哈,我要水平垂直居中显示信息。</div>    
  4.   
  5. </body>  

css编码:

CSS Code拷贝內容到剪贴板
  1. <style>    
  2.   
  3. div{       
  4.   
  5.     border:1px solid red;/*以便显示信息垂直居中实际效果显著为 div 设定了边框*/           
  6.   
  7.     width:200px;/*定宽*/       
  8.   
  9.     margin:20px auto;/* margin-left 与 margin-right 设定为 auto */    
  10.   
  11. }    
  12.   
  13.  </style>  

还可以写成:

CSS Code拷贝內容到剪贴板
  1. margin-left:auto;    
  2.   
  3. margin-right:auto;  

留意:元素的“左右 margin” 是能够随便设定的。

不确定宽块状元素

1. 添加 table 标识

运用table标识的长度自融入性---即不确定义其长度也不默认设置父元素body的长度(table其长度依据其内文字长度决策),因而能够看作1个定宽度块元素,随后再运用定宽度块状垂直居中的margin的方式,使其水平垂直居中。

第1步:为必须设定的垂直居中的元素外面添加1个 table 标识 ( 包含 、、 )。

第2步:为这个 table 设定“上下 margin 垂直居中”(这个和定宽块状元素的方式1样)。

html编码:

XML/HTML Code拷贝內容到剪贴板
  1. <div>  
  2.  <table>  
  3.    <tbody>  
  4.      <tr><td>  
  5.      <ul>  
  6.          <li>我是第1写作本</li>  
  7.          <li>我是第2写作本</li>  
  8.          <li>我是第3写作本</li>  
  9.      </ul>  
  10.      </td></tr>  
  11.    </tbody>  
  12.  </table>  
  13. </div>  

css编码:

CSS Code拷贝內容到剪贴板
  1. <style>    
  2.     table{   
  3.         border:1px solid;    
  4.         margin:0 auto;    
  5.     }    
  6. </style>  

2. 设定 display: inline 方式:与第1类型似,显示信息种类设为行内元素,开展不确定宽元素的特性设定

更改块级元素的 display 为 inline 种类(设定为 行内元素 显示信息),随后应用 text-align:center 来完成垂直居中实际效果。以下事例:

html编码:

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <div class="container">  
  3.     <ul>  
  4.         <li><a href="#">1</a></li>  
  5.         <li><a href="#">2</a></li>  
  6.         <li><a href="#">3</a></li>  
  7.     </ul>  
  8.  </div>  
  9. </body>  

css编码:

CSS Code拷贝內容到剪贴板
  1. <style>    
  2. .container{   
  3.     text-align:center;   
  4.  }    
  5. /* margin:0;padding:0(清除文字与div边框之间的空隙)*/    
  6. .container ul{   
  7.     list-style:none;   
  8.     margin:0;   
  9.     padding:0;   
  10.     display:inline;   
  11.  }    
  12. /* margin-right:8px(设定li文字之间的间距)*/    
  13. .container li{   
  14.     margin-right:8px;   
  15.     display:inline;   
  16.  }   
  17.  </style>  

3. 设定 position:relative 和 left:50%:运用相对性精准定位的方法,将元素向左偏位 50% ,即做到垂直居中的目地

根据给父元素设定 float,随后给父元素设定 position:relative 和 left:50%,子元素设定 position:relative 和 left: ⑸0% 来完成水平垂直居中。

编码以下:

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <div class="container">  
  3.     <ul>  
  4.         <li><a href="#">1</a></li>  
  5.         <li><a href="#">2</a></li>  
  6.         <li><a href="#">3</a></li>  
  7.     </ul>  
  8.  </div>  
  9. </body>  

css编码:

CSS Code拷贝內容到剪贴板
  1. <style>    
  2. .container{   
  3.     float:left;   
  4.    position:relative;   
  5.   left:50%    
  6. }    
  7.  .container ul{   
  8.     list-style:none;   
  9.     margin:0;   
  10.     padding:0;   
  11.     position:relative;   
  12.     left:⑸0%; }    
  13. .container li{   
  14.     float:left;   
  15.     display:inline;   
  16.     margin-right:8px;   
  17. }   
  18. </style>  

也有1种方式:

CSS Code拷贝內容到剪贴板
  1. .container{   
  2.   
  3.     positionabsolute;   
  4.     top:50%;   
  5.     left:50%;   
  6.   
  7.     margin:-170px -250px/*container宽500px,高340px*/  
  8.   
  9. }  

以上这篇CSS水平垂直居中总结(初学者必看篇)便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。