两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • css让容器水平垂直居中的7种方式

    DIV+CSS教程2018年05月30日关键词:

    这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下。
    这种方法比较多,本文只总结其中的几种,以便加深印象。
    效果图都为这个:

    方法一:position加margin

    XML/HTML Code复制内容到剪贴板
    1. <div class="wrap">  
    2.     <div class="center"></div>  
    3. </div>  
    4.   
    CSS Code复制内容到剪贴板
    1. /**css**/ .wrap { width200pxheight200pxbackgroundyellowpositionrelative;   
    2. } .wrap .center { width100pxheight100pxbackgroundgreenmarginautopositionabsoluteleft: 0; rightright: 0; top: 0; bottombottom: 0;   
    3. }  

    兼容性:主流浏览器均支持,IE6不支持

    方法二:diaplay:table-cell

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.      <div class="center"></div>  
    4. </div>  
    5.   
    CSS Code复制内容到剪贴板
    1. /*css*/ .wrap{ width200pxheight200pxbackgroundyellowdisplaytable-cellvertical-alignmiddletext-aligncenter;   
    2. } .centerdisplayinlineblockvertical-alignmiddlewidth100pxheight100pxbackgroundgreen;   
    3. }   
    4.   

    兼容性:由于display:table-cell的原因,IE67不兼容

    方法三:position加 transform

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.     <div class="center"></div>  
    4. </div>  
    5.   
    CSS Code复制内容到剪贴板
    1. /* css */ .wrap { positionrelativebackgroundyellowwidth200pxheight200px;} .center { positionabsolutebackgroundgreentop:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width100pxheight100px;   
    2. }   
    3.   

    兼容性:ie9以下不支持 transform,手机端表现的比较好。

    方法四:flex;align-items: center;justify-content: center

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.     <div class="center"></div>  
    4. </div>  
    5.   
    CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex; align-items: centerjustifycontentcenter;   
    2. } .center { backgroundgreenwidth100pxheight100px;   
    3. }   
    4.   

    移动端首选

    方法五:display:flex;margin:auto

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.     <div class="center"></div>  
    4. </div>  
    CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex;    
    2. } .center { backgroundgreenwidth100pxheight100pxmarginauto;   
    3. }   
    4.   

    移动端首选

    方法六:纯position

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.     <div class="center"></div>  
    4. </div>  
    5.   
    CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxpositionrelative;   
    2. /**方法一**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft50pxtop50px;    
    3.      
    4. /**方法二**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft: 50%; top: 50%; margin-left:-50pxmargin-top:-50px;   
    5. }   
    6.   

    兼容性:适用于所有浏览器

    方法六中的方法一计算公式如下:
    子元素(conter)的left值计算公式:left=(父元素的宽 – 子元素的宽 ) / 2=(200-100) / 2=50px;
    子元素(conter)的top值计算公式:top=(父元素的高 – 子元素的高 ) / 2=(200-100) / 2=50px;
    方法二计算公式:
    left值固定为50%;
    子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;
    top值也一样,固定为50%
    子元素的margin-top= -(子元素的高/2)=-100/2= -50px;

    方法七:兼容低版本浏览器,不固定宽高

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="table">  
    3.     <div class="tableCell">  
    4.         <div class="content">不固定宽高,自适应</div>  
    5.     </div>  
    6. </div>  
    7.   
    CSS Code复制内容到剪贴板
    1. /*css*/ .table { height200px;/*高度值不能少*/ width200px;/*宽度值不能少*/ display: table; positionrelativefloat:leftbackgroundyellow;   
    2. } .tableCell { displaytable-cellvertical-alignmiddletext-aligncenter;           
    3.     *positionabsolutepadding10px;   
    4.     *top: 50%;   
    5.     *left: 50%;   
    6. } .content {   
    7.     *position:relative;   
    8.     *top: -50%;   
    9.     *left: -50%; backgroundgreen;   
    10. }   
    11.   

    暂时总结上面的七种,这种方法太多,其实只要习惯了其中的一两种也就够用了。

    总结

    如果是移动端,那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况,快、准、狠
    也就是用 flex; align-items: center; justify-content: center;

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.     <div class="center"></div>  
    4. </div>  
    5.   
    CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex; align-items: centerjustifycontentcenter;   
    2. } .center { backgroundgreenwidth100pxheight100px;   
    3. }   
    4.   

    或者display:flex;margin:auto;

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.     <div class="center"></div>  
    4. </div>  
    5.   
    CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex;   
    2. } .center { backgroundgreenwidth100pxheight100pxmarginauto;   
    3. }   
    4.   

    如果是PC端,要考虑兼容性的话。方法六是不错滴,也就是纯position。

    XML/HTML Code复制内容到剪贴板
    1. <!– html –>  
    2. <div class="wrap">  
    3.     <div class="center"></div>  
    4. </div>  
    5.   
    CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxpositionrelative;   
    2. /**方法一**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft50pxtop50px;     
    3.      
    4. /**方法二**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft: 50%; top: 50%; margin-left:-50pxmargin-top:-50px;   
    5. }   
    6.   

    如果PC端的中间的元素高度不固定,那么就用方法七即可,代码就不复制了。

    这种css元素垂直的如果真的要总结起来,应该有十几二十几种。不过也没必要全部掌握吧,只要大概了解一些,用起来没有副作用就行。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    其他网友正在看:
    CSS实现页面两列布局与三列布局的方法示例

    1. 使用BFC的原理实现BFC的规则之一,就是BFC区域,不会与float box重叠,因此我们可以利用这一点来实现3列布局。html代码如下XML/HTML Code复制内容到剪贴板<div class="left"></div>  <div class="right">&···

    2018-05-30关键词:

    浅谈css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错。nice~属性选择符E[att]       选择具有att属性的E元素。XML/HTML Code复制内容到剪贴板input[type]{color: #red;}<input type="radio">  E[att=···

    2018-05-30关键词:

    CSS中的指定值、初始值和计算值学习教程

    CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。我们可以使用 CSS 选择器,为选中的元素设置需要的样式。在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 — 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却···

    2018-05-30关键词:

    CSS实现鼠标滑过鼠标点击代码写法

    鼠标滑过元素,使得元素的样式发生改变我们定义一个按钮标签复制代码代码如下:<button class=”px-button”>BUTTON</button>我们首先设置按钮的背景颜色为灰色:复制代码代码如下:.px-button{background-color: grey;}我们要使得鼠标滑过···

    2018-05-30关键词:

    css解决display:inline-block;产生的缝隙(间隙)的方法

    今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量,因为卡片的个数不固···

    2018-05-30关键词:

    详解css常用选择器

    导入外部css样式表的方法使用link标签导入外部css样式表<link rel="stylesheet" href="css/demo01.css">在样式表中import(导入)外部样式表@import url("/crazy-html5/06css/css/demo01.css");使用内部样式表内部样式表只能作用···

    2018-05-30关键词: