place-items

 CSS 中的 place-items 是一个简写属性 ,它允许你在相关的布局(如 Grid 或 Flexbox)中可以同时沿着块级和内联方向对齐元素 (例如:align-items 和 justify-items 属性) 。
如果未提供第二个值,则第一个值作为第二个值的默认值。
 
也就是说以后需要定义水平垂直居中的盒子就不需要再 justify-items: center 和 align-items: center 了,直接一行搞定,看起来更加专业

构成属性

该属性是以下两个 CSS 属性的简写:

语法

/* Keyword values */
place-items: auto center;
place-items: normal start; /* Positional alignment */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal; /* Baseline alignment */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto; /* Global values */
place-items: inherit;
place-items: initial;
place-items: unset;


MDN对 place-items 的描述

- END -

CSS003. 盒子水平垂直居中简写属性(place-items)的更多相关文章

  1. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  2. CSS(九):设置盒子水平垂直居中

    通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  4. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  5. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  6. html中div使用CSS实现水平/垂直居中的多种方式

    CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...

  7. 让图片在div盒子中水平垂直居中

    //调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...

  8. CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法

     CSS 实现盒子模型水平居中 水平居中效果图如下: HTML: CSS 全局样式: 方法一:使用margin: 0 auto;(只适用于子盒子有宽的时候) 方法二:text-align + disp ...

  9. 【css】常用的几种水平垂直居中方式与盒子模型,面试经常问到!

    div水平垂直居中 假设结构为此,2个div嵌套 <div class="box"> <div class="content">< ...

随机推荐

  1. BBPlayerView

    GitHub 仓库地址 一个高度封装的视频播放器视图,基于 AVPlayer.AVPlayerLayer.AVPlayerItem. 继承自 UIView,可以当做一般视图使用,适用于 Swift 和 ...

  2. JavaGUI画笔工具的使用

    JavaGUI画笔工具的使用 package GUI; import java.awt.*; public class TestPaint { public static void main(Stri ...

  3. linux 磁盘IO速度测试

    写入速度测试命令:time dd oflag=direct if=/dev/zero of=/data2/test bs=2k count=1000000 //if表示从哪里读取 of表示写入到哪里 ...

  4. 如何保证前端项目上线后的安全?webfunny已总结前端最关键的12大指标

    实时监控大屏   众所周知:实时流量大屏,是用来监控前端项目上线质量的. 如大家所知,监控系统会监控线上应用的各项指标,如:错误.白屏.耗时等等,但是仔细一想,即使有这些监控,我们也不一定能够保证线上 ...

  5. [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  6. NOIP 模拟 6 宝藏

    题目 题解 这道题是 \(NOIP\;\;2017\) 的原题 ,让我见识到了什么是真正的 \(dfs\) 考场上想出来要状压了,\(n\) 那么小,肯定是压 \(n\) 那一位,然后层第转移,但是想 ...

  7. maven打jar包,导入本地jar

    本地jar包存放目录 项目目录/lib/*.jar 导入jar包配置 <resources> <!--扫描到的配置yml--> <resource> <dir ...

  8. vue同一个页面可以有多个router-view

    参考:https://blog.csdn.net/u011615787/article/details/80075240 参考:https://router.vuejs.org/zh/guide/es ...

  9. 【java web】过滤器filter

    一.过滤器简介 过滤器filter依赖于servlet容器 所谓过滤器顾名思义是用来过滤的,Java的过滤器能够为我们提供系统级别的过滤,也就是说,能过滤所有的web请求, 这一点,是拦截器无法做到的 ...

  10. 05.SpringMVC之请求映射

    @RequestMapping是一个用来处理请求地址映射的注解,可用于类或者方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径. @RequestMapping注解有六个属性,下面进 ...