美文网首页
未知宽高div如何在页面内水平垂直居中

未知宽高div如何在页面内水平垂直居中

作者: 郑伟的菜园子 | 来源:发表于2016-01-07 02:42 被阅读445次
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>moyu-edu.com</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        body{
            text-align: center;
        }
        span{
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        div{
            width: 400px;
            border: solid 1px red;
            vertical-align: middle;
            display: inline-block;
            *display: inline;
            *zoom:1;
            text-align: left;
        }
    </style>
</head>
<body>
    <span></span><div class="box">测试文字<br>asdfasdf<br>asdafasdfsdafadsf</div>
</body>
</html>

兼容所有的浏览器

相关文章

  • 未知高度垂直水平居中

    未知宽高的弹出框,水平垂直居中 parrent 内的元素水平垂直居中 parrent 内的元素垂直居中

  • 未知宽高div如何在页面内水平垂直居中

    兼容所有的浏览器

  • 不定宽高的div盒子和不定宽高的盒子水平垂直居中

    让一个不定宽高的div,垂直水平居中的几种实现方式 不定宽高的div垂直居中的方式: 1、使用CSS方法: 父盒子...

  • css---各种居中垂直详解

    项目中经常会有各种居中的布局,什么垂直居中,水平居中,垂直水平居中,已知宽高和未知宽高居中,那么接下来就整体的总结...

  • CSS居中大全(带截图)

    文字水平居中 图片水平垂直居中 图片与文字水平垂直居中 代码同上 DIV相对于页面垂直居中并且响应式 视口绝对垂直...

  • css实现水平垂直居中的方法

    本文主要针对子元素已知宽高和未知宽高的情况下,对其进行水平垂直居中  本文假设对如下元素进行水平垂直居中方式(父元...

  • 面试题

    怎么让一个不定宽高的div,垂直水平居中 答:1.父盒子设置: display:relative;DIV设置 :...

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • 金三银四前端面试汇总

    CSS div不定宽高,如何实现宽高比例1:1 div不定宽高,实现垂直居中 div不知道宽高且display:n...

  • 1-css的多种垂直居中的方法

    多种css垂直居中的方法 ==css3不定宽高水平垂直居中== 1:固定高宽的垂直居中 如上图,固定高宽的很简单,...

网友评论

      本文标题:未知宽高div如何在页面内水平垂直居中

      本文链接:https://www.haomeiwen.com/subject/dnrfkttx.html