<legend id="ra9il"><dl id="ra9il"></dl></legend>

  • <legend id="ra9il"><dl id="ra9il"></dl></legend>
  • <legend id="ra9il"><dl id="ra9il"></dl></legend>

    <optgroup id="ra9il"></optgroup>

    <span id="ra9il"><output id="ra9il"></output></span>
    <ol id="ra9il"></ol>
    <ol id="ra9il"></ol>

  • 首页 > web前端 > css教程 > 正文

    css里上下居中怎么弄?

    原创 2019-05-03 23:10:00 0 533
    第六期线上培训班
    css里上下居中也就是垂直居中,css中按元素可以分为三种垂直居中方式,分别是单行的行内元素,多行的行内元素以及块元素的垂直居中,下面将做详细介绍。

    单行的行内元素

    只需要设置单行行内元素的"行高等于盒子的高"即可;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
     
        #son {
            background-color: green;
            height: 300px;
        }
    </style>
     
    <div id="father">
        <span id="son">我是单行的行内元素</span>
    </div>

    效果:

    1556519521438598.jpg

    多行的行内元素

    使用给父元素设置display:table-cell;和vertical-align: middle;即可;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: table-cell;
            vertical-align:middle;
        }
     
        #son {
            background-color: green;
        }
    </style>
     
    <div id="father">

    <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>

    </div>

    效果:

    1556519558892168.jpg

    块级元素

    方案一:使用定位

    首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

    定高度:设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            margin-top: -50px;
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    不定高度:利用css3新增属性transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
     
        #son {
            width: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateY(-50%);
    }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:

    1556519576485117.jpg

    方案二:使用flexbox布局实现(高度定不定都可以)

    使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            align-items: center;
        }
     
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
     
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:

    1556519592845736.jpg

    相关教程:CSS视频教程

    以上就是css里上下居中怎么弄?的详细内容,更多请关注php中文网其它相关文章!

    php中文网最新课程二维码
  • 相关标签:css 上下居中 垂直居中
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS 居中 可随着浏览器变大变小而居中_html/css_WEB-ITnose
  • div + css 居中_html/css_WEB-ITnose
  • DIV CSS 居中代码(以及靠右)_html/css_WEB-ITnose
  • CSS 如何进行单一div的正多边形变换
  • css里上下居中怎么弄?
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    little bottle

    认证0级讲师

    最近文章
    单例模式什么时候用? 456
    vue框架是什么? 707
    python是什么语言写的? 855

    相关视频教程

  • Css3特效效果视频教程 Css3特效效果视频教程
  • CSS的美化功能 CSS的美化功能
  • CSS视频教程-玉女心经版 CSS视频教程-玉女心经版
  • CSS 代码实例 CSS 代码实例
  • 相关视频章节

    第六期线上培训班 今开奖结果-今期开奖结果现场-今期开奖结果直