美文网首页
垂直居中容器

垂直居中容器

作者: 郑伟的菜园子 | 来源:发表于2016-10-12 22:33 被阅读16次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 400px;
            height: 400px;
            border:1px solid gray;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
            background: pink;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

相关文章

  • 普通的css样式技巧

    垂直居中 1、多行文字垂直居中 给文字容器的父容器设定display:table,给文字容器设定vertical-...

  • 垂直居中容器

  • CSS(五)对齐方式(居中)

    一、水平居中 margin: auto;设置子容器margin属性,可使元素在父容器内水平居中 二、垂直居中 li...

  • CSS布局--水平&垂直对齐

    设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文...

  • CSS居中

    水平居中 文字的水平居中 容器的水平居中 垂直居中 行高与容器高设为相等 当文本行高等于父容器高度时, 就可以实现...

  • [小结]css垂直居中方式小结

    文字垂直居中例如: 块元素垂直居中于父元素(也叫负边距居中,宽高都适用) 或者可以水平对齐 块元素(容器)水平居中

  • [CSS] 不定高度垂直居中

    容器给定高度,不定高度的内容如何在容器中垂直居中呢?

  • CSS 盒模型

    vertical:middle 针对表格,垂直居中 针对行内元素,基于父容器的基线垂直居中 边距合并 外边距合并:...

  • 纯CSS实现苹果系统的相册图标

    一、定义图标容器 定义一个容器: 居中显示: 使用flex布局做左右和垂直居中 定义icon容器的尺寸: 二、画出...

  • [Flutter] 常用的布局容器

    居中容器 Center 可以让 child 在其中垂直和水平居中 两种处理间距布局容器 Container 和 P...

网友评论

      本文标题:垂直居中容器

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