美文网首页小程序开发实用笔记
flex布局水平垂直居中

flex布局水平垂直居中

作者: SheldonYu | 来源:发表于2018-01-03 15:07 被阅读6910次

html

<div class="box">
     <section class="inner"></section>
</div>

css

    .box {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            width: 1000px;
            height: 600px;
            border: 1px solid red;
        }
        .inner {
            width: 300px;
            height: 200px;
            background-color: red;
        }

相关文章

  • [2020-08-10]css3中的常用几种布局

    div的水平垂直居中 flex布局,使用display: flex实现水平垂直居中 grid布局 使用grid布局...

  • CSS: 居中

    水平居中 flex 布局 内联元素 margin position table 过时,放弃 垂直居中 flex 布...

  • 块元素水平垂直居中

    块元素水平垂直居中 使用flex布局将子元素水平垂直居中 使用position定位 或

  • 面试总结

    1.水平垂直居中 flex布局父元素:display:flex; flex-direction:row; ju...

  • 如何制作响应式风格-知识点回顾

    1:如何进行页面布局? 弹性盒子: display:flex 可以实现 垂直,水平居中、垂直反序 flex-dir...

  • html布局篇

    垂直居中 行内块级元素 position定位 flex布局 grid布局 水平居中 text-align 块级元素...

  • CSS:垂直+水平居中/单位in

    水平+垂直居中:display: flex 布局下, margin auto 的生效不仅是水平方向,垂直方向生效。...

  • CSS 系列——Grid布局学习笔记

    Grid 布局,就是网格布局。 简单的需求,垂直居中、水平居中等,有 Flex 布局。 网格布局,对应网页设计或者...

  • 前端日记

    #水平垂直居中布局: flex弹性布局,table-cell布局(父级table),定位(多种方式); #如何安...

  • 居中布局

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

网友评论

    本文标题:flex布局水平垂直居中

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