精华内容
下载资源
问答
  • css实现div垂直水平居中

    千次阅读 2017-05-11 17:53:16
    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align这个属性对block元素不起作用,但对table-cell元素是...

    一、表格布局法
    table-cell轻松设置文本图片水平垂直居中
    让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align这个属性对block元素不起作用,但对table-cell元素是有效的)设置元素垂直居中,即可达到我们想要的效果。好处是不需要事先知道子元素的高度。
    IE7及以下版本不支持此方法,IE8及以上版本及大部分的主流浏览器都很好的支持。

    <div class="outer">
        <div class="inner">
            content
        </div>
    </div>
    
    
    .outer{
        display:table-cell;
        vertical-align:middle;
        text-algin:center;
    }

    二、绝对定位法
    利用相对定位使元素垂直居中:要求元素有固定的高度,设置元素的top:50%,这样元素的上边边界线和该元素的父级元素的垂直方向的中线重合,设置margin-top,值为负的元素高度的一半,让元素向上移动半个高度的位置,就可以使元素的垂直方向的中线与父级元素的中线重合,即实现了元素的垂直居中。

    <div class="outer">
        <div class="inner">
            content
        </div>
    </div>
    
    
    .outer{
        width:200px;
        height:200px;
        position:relative;
    }
    .inner{
        position:absolute;
        top:50%;
        left:50%;
        width:100px;
        height:100px;
        margin-top:-50px;
        margin-left:-50px;
    }

    三、使用css3的新属性transform:translate(x,y)属性
    在上面的方法中,我们要知道子元素的高度,但是如果高度不确定怎么办,这时候我们可以利用css3的transform属性,具体的代码如下:

    .outer{
        width:200px;
        height:200px;
        position:relative;
        background-color:pink;
    }
    .inner{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        -webkit-transform:translate(-50%,-50%);            
        -moz-transform:translate(-50%,-50%); 
        -ms-transform:translate(-50%,-50%);            
    }

    这个方法可以不需要设定固定的宽高,在移动端用的会比较多,在移动端css3兼容的比较好

    四、绝对定位法

    利用position:absolute属性,设置top/bottom/right/left。
    .outer{
        width:200px;
        height:200px;
        position:relative;
        background-color:pink;
    }
    .inner{
        position:absolute;
        width:100px;
        height: 100px;
        margin:auto;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
    } 
    展开全文
  • css实现div水平垂直居中的几种方法一 . 给父div设置合适的padding二 . 通过position属性实现居中三 . 通过flex实现居中 一 . 给父div设置合适的padding ##父div设置padding 二 . 通过position属性实现居中 1.设置父...

    一 . 给父div设置合适的padding

    ##父div设置padding
    样式

    二 . 通过position属性实现居中

    1.设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;
    

    在这里插入图片描述
    2.设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半; margin-top: --元素高度的一半;(适用于子元素宽高固定)
    在这里插入图片描述
    3.设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translate(-50%, -50%);(适用于子元素宽高不固定)
    在这里插入图片描述

    三 . 通过flex实现居中

    在这里插入图片描述

    展开全文
  • 在学习大前端过程中,总结了一下元素的几种水平垂直居中的方法 实现如图: 说明:前四种方法使用到的class为wrap的div都设置为{display:relative;} 1.子级设置 absolute+margin:auto,top、left、right、bottom的...

    在学习大前端过程中,总结了元素水平垂直居中的几种方法
    实现如图:
    在这里插入图片描述

    说明:前四种方法使用到的class为wrap的div都设置为{display:relative;}

    1.子级设置 absolute+margin:auto,top、left、right、bottom的值相等即可,不一定要都是0
    在这里插入图片描述

    2.子级设置absolute+left:50%;top:50%;margin-left:减去此元素宽度的一半;margin-top:减去此元素高度的一半

    在这里插入图片描述

    缺点:需要知道子元素的宽高

    3.子级absolute+left:calc(50%减去宽度的一半);top:calc(50%减去高度的一半);

    在这里插入图片描述

    4.子级 absolute+left:50%;top:50%;再使用transfrom:translate(-50%,-50%)

    在这里插入图片描述

    5.flex布局(建议使用)

    在这里插入图片描述

    好了,今天的分享就到这里啦,大家可以自己试试哟,如发现有错误,欢迎指出~

    展开全文
  • 比如设置html中下面的div垂直水平居中,则 div id="box">div> css样式 #box{ width: 300px; height: 200px; margin-left: -150px;//宽度的一半,很重要,不然不居中,会偏右 margin-top: -...

    比如设置html中下面的div为垂直水平居中,则

    <div id="box"></div>


    css样式

    
    
    #box{
        width: 300px;
        height: 200px;
        margin-left: -150px;//宽度的一半,很重要,不然不居中,会偏右
        margin-top: -100px;//高度的一半
        position: absolute;//绝对定位方式
        top: 50%;
        left: 50%;
        background-color: aqua;//背景颜色,便于测试查看效果
    }

    展开全文
  • 采用CSS3中的transform属性可以实现div垂直居中。具体实现方法如下: .main{ width:200px; height:150px; float:left; border:1px solid #FF1F00;} .main_in{ width:150px; height:100px; border:1px...
  • 当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:&amp;lt;body&amp;gt; &amp;lt;div class=&amp;quot;main&amp;quot;&amp;gt;
  • CSS实现图片垂直水平居中在仿一个商城站,在设置图片垂直居中时发现vertical:middle不起作用,又不想用绝对定位来写,于是百度之。 这个方法还挺简单的,所以把方法记录一下。//css div{display: table-cell; ...
  • CSS实现DIV水平垂直居中

    千次阅读 2019-06-19 19:12:12
    使用CSS样式实现DIV的水平与垂直居中。 1、使用<div>标签的 align 属性实现水平居中 HTML中的 <div> 标签的 align 属性用于规定 div 元素中的内容的水平对齐方式。所有浏览器都支持 align 属性。 ...
  • 如何用CSS实现DIV内容垂直居中 作者:adobe-dr… 教程来源:adobe-dreamweaver.cn 点击数:4302 更新时间:2008-11-5 [+]收藏本页[+] 批量修改图片大小 局的DIV中要...
  • 实现Div层里的文字垂直居中的方法 有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字;方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为...
  • cssdiv垂直水平居中,兼容ie6+

    千次阅读 2015-03-17 22:53:57
    body { font-size:12px;font-family:tahoma;} #wrap { background-color:#FFCCFF; width:760px;... /*垂直居中因素*/ _position:relative; /*垂直居中因素*/ } #subwrap { text-align:cente
  • css 实现div垂直居中的几种方法

    千次阅读 2017-11-03 16:46:30
    转自http://www.haorooms.com/post/css_div_juzhong 前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div...固定高宽div垂直居中 如上图,固定高宽的很简
  • CSS实现div盒子水平垂直居中的方式

    千次阅读 2019-01-03 10:26:02
    div id='container'&amp;gt; &amp;lt;div class='middle'&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; 首先预备工作,假设这是登录界面,那通常会涉及到背景图片撑满屏幕 &...
  • css实现垂直水平居中

    2016-03-20 21:15:53
    css实现垂直水平居中
  • DIV实现遮盖层和DIV垂直水平居中
  • .box { width: 300px; height: 200px; background: green; position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto;... <div class="box">我是合子</div>  
  • CSS实现垂直水平居中

    千次阅读 2018-06-11 16:45:48
    前言 面试中常常被问到,如何使用css实现一个元素的垂直水平方向上居中,特别是笔试题的时候,这道题目的出现频率...这种情况就比较容易了,直接设置容器的text-align就可以实现内容元素的水平居中,设置垂直居中...
  • /* 固定宽高div,在浏览器中保持水平垂直居中 */ #div1 { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90; } ...
  • 学习过程中经常遇到要居中的问题,水平居中问题比较好解决,而垂直居中
  • CSS实现DIV水平居中和上下垂直居中

    万次阅读 2014-05-28 13:49:19
    上下垂直居中 在线演示 DIVCSS5 #main { position: absolute; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #00F } /*css注释:为了方便截图...
  • css实现盒子内部 div水平垂直居中

    千次阅读 2019-04-05 14:45:44
    总结一下利用css实现垂直居中的几种方法
  • CSS实现盒子模型水平居中、垂直居中水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 水平居中效果图 水平居中全局样式 .parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; ...
  • 前言:在写页面的时候,...一、div宽高固定,使用css实现居中效果 ①当div的宽高固定时,父元素shadow通过absolute定位以后,通过top:50%,left:50%移动到屏幕中央,子元素shadow-bg也absolute定位,通过top,lef...
  • 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...
  • css实现div水平垂直居中

    千次阅读 2017-04-27 15:49:05
    div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位;  2.margin: auto; 其width、height如何更改都是居中显示的,兼容性可以,IE7及之前版本不支持 .div1{ ...
  • 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div...固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top:
  • CSS实现子元素div水平垂直居中

    千次阅读 多人点赞 2020-08-15 10:02:39
    css样式 1. 配合定位与margin:auto 父元素加相对定位,子元素加绝对定位 .main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ wid
  • css实现div水平垂直居中(两种方法)

    千次阅读 2019-04-07 15:20:49
    div垂直水平居中应该是很常见的问题了,网上的方法也很多~总之就是要实现下图这个效果: 我们慢慢来,先看看实现这个效果真正的难点(坑)在哪里~先不说具体的实现,很多人应该都熟悉margin:0 auto这个“...
  • 1.0文本居中 1.1文本水平居中 //html <body> <div> <p>123</p> <p>456</p> </div> </body> //css <style> div{ width: 4...
  • css实现垂直水平居中

    千次阅读 2016-08-05 09:16:10
    css实现垂直水平居中

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,592
精华内容 18,236
关键字:

css实现div垂直水平居中