CSS块元素水平垂直居中的实现技巧

最新推荐文章于 2023-03-12 09:46:33 发布

前端老码农

最新推荐文章于 2023-03-12 09:46:33 发布

阅读量470

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=j1baikb2j&title=CSS%E5%9D%97%E5%85%83%E7%B4%A0%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%8A%80%E5%B7%A7

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

                        
  针对之前遇到过的一些特殊样式的实现，我今天做个总结，目的有二：一是将这些方法记录下来，以便将来需要用到时查找使用。二为将这些大神们智慧的结晶发扬光大，让广大前端程序猿们能够少走弯路。此贴为更新帖，以后若有好的css样式技巧，小菜我会不定期更新。 
 
  一、块元素水平垂直居中 
 
   对于一个块元素的水平垂直居中，水平居中的方式不必多说，一般用margin:auto;等方法即可实现。而对于垂直居中，尽管有vertical-align:middle属性，但是由于其只适用于table标签中，而table标签效果不好控制的特点大家都懂。。。因此，我们一般常用的方法是：将子级元素设定inline-block属性，并将其行高属性：line-height的值设定为与父级元素相同的高度。 
 
  代码如下： 
 
  html方面： 
 
  <body>  
<div class="big">  
<div class="small"></div>  
</div>  
</body>  
 
  css方面：　 
 
  .big  
{  
width:500px;  
height:500px;  
border:1px solid red;  
position:relative;  
}  
.small{  
width:200px; /*自己元素宽高可任意设定 */  
height:200px;  
position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;  
margin:auto;  
background-color:#cc9900;  
 }  
 
   在上述代码中，子级元素的宽高是任意设定的。都可以实现此元素在父级元素中水平垂直居中显示。在父级元素中，我们用了position的relative属性。在子级元素中，我们将它的position属性设定为absolute后，将四个方向的值都设定为0px。并且让他的margin值自适应。从审查元素中我们可以发现，如此设定后，子级元素的margin区域会充满整个父级元素，并且左右margin值是相等的，上下margin值亦如此。但是这并不符合，当代码数值有冲突时，优先解析top值及left值的规律。因为究竟是什么原理，小菜也不得而知。。如果有大神知晓，还望不吝赐教。但是这不失为一种好的办法，希望大家活学活用。 
 
  二、after伪类清浮动 
 
   通常我们在对块元素设浮动以后，需要对其清浮动，以免布局混乱。常见的清浮动方法主要有两种：1）、在后面的子元素css中写"clear:both;"。2）在浮动元素的父级元素中写"overflow:hidden"。现在，我们可以用第三种方法，利用after伪类写一个浮动属性，这样只要有需要清楚浮动的地方，我们就给其父元素加上这样一个浮动属性就可以了。 
 
  代码如下： 
 
  .clearfix:after  
{  
content:"";  
display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/   
clear:both;  
}  
 
   这种方法有个好处，即可以将其写入reset中，之后可以多次调用。