flex布局水平垂直居中

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

[2020-08-10]css3中的常用几种布局
CSS: 居中
块元素水平垂直居中
面试总结
如何制作响应式风格-知识点回顾
html布局篇
CSS：垂直+水平居中/单位in
CSS 系列——Grid布局学习笔记
前端日记
居中布局

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)，定位(多种方式); #如何安...
居中布局
水平居中垂直居中垂直水平居中已知元素的宽高的居中布局定位居中布局盒模型居中布局图片的垂直水平居中(利用...