css如何实现快速居中?

简介: 简单来说快速居中,就是给它的父级设置display: flex;属性,自身设置margin: auto;的属性

css如何实现快速居中?


简单来说快速居中,就是给它的父级设置display: flex;属性,自身设置margin: auto;的属性


例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        html,body {
            width: 100%;
            height: 100%;
            display: flex;
        }
        .allitem{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: auto;
        }
        .all {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: auto;
            display: flex;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="allitem">
        </div>
    </div>
</body>
</html>
相关文章
|
11天前
|
前端开发 容器
CSS如何实现双飞翼布局?
【10月更文挑战第27天】
|
6月前
|
前端开发 程序员 开发者
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
|
前端开发
CSS使图片居中的三种方法
CSS使图片居中的三种方法
151 0
|
XML 前端开发 数据格式
前端样式CSS水平垂直居中的十中方法
首先我们先来了解下什么是CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现[HTML](https://baike.baidu.com/item/HTML)([标准通用标记语言](https://baike.baidu.com/item/标准通用标记语言/6805073)的一个应用)或[XML](https://baike.baidu.com/item/XML)(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 CSS 能够对网页中元素位置的排版进行像素级精
84 0
|
前端开发
CSS 水平垂直居中的方式
CSS 水平垂直居中的方式
|
前端开发
CSS学习笔记(九) 居中方案
CSS学习笔记(九) 居中方案
113 0
|
前端开发
【前端】【样式】CSS居中的三种方式
【前端】【样式】CSS居中的三种方式
90 1
|
前端开发 开发者 容器
CSS 居中总结 | 学习笔记
快速学习 CSS 居中总结
CSS 居中总结 | 学习笔记
|
前端开发
CSS 居中的几种方式
CSS 居中的几种方式
156 0