CSS 实现盒子模型水平居中

水平居中效果图如下：

HTML：

CSS 全局样式：

方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候）

方法二：text-align + display（子盒子有或没有宽度的时候都适用）

方法三：position 定位（只适用于子盒子有宽度和高度的时候）

方法四：position + transform（子盒子有或没有宽高的时候都适用）

方法五：flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用）

CSS 实现盒子模型垂直居中

垂直居中效果图如下

HTML 和 CSS全局样式同上。

方法一：position 定位（适用于子盒子有宽度和高度的时候）

方法二：position + transform（子盒子有或没有宽高的时候都适用）

 方法三：flex 布局（子盒子有或没有宽高的时候都适用）

CSS 实现盒子模型水平垂直居中

水平垂直居中效果图如下

HTML 和 CSS全局样式同上

方法一：position 定位（适用于子盒子有宽度和高度的时候）

方法二：position + transform（子盒子有或没有宽高的时候都适用）

方法三：flex 布局（子盒子有或没有宽高的时候都适用）

CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法的更多相关文章

  1. 用CSS/CSS3 实现水平居中和垂直居中，水平垂直居中的方式

    一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...

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

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

  3. css — 定位、背景图、水平垂直居中

    目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...

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

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

  5. CSS之常见布局|常用单位|水平垂直居中

    常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...

  6. CSS-水平居中、垂直居中、水平垂直居中

    1.水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素设置text-align:center即可 ...

  7. 《网页布局基础篇》HTML+CSS单列布局--水平居中，垂直居中，水平垂直居中

    https://blog.csdn.net/panlu666_pl/article/details/66480433 一.水平居中 子元素在父元素中水平居中 1.使用 text-align和inlin ...

  8. CSS之水平垂直居中

    在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了. 列如这样: <!DOCTYPE html&g ...

  9. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

随机推荐

  1. svg入门详解

    一.svg是什么? SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 是使用 XML 来描述二维图形和绘图程序的语言. SVG 图像在放大或改变尺寸的情况下其图 ...

  2. Servlet快速入门及运行流程

    一.Servlet快速入门 1.创建一个web工程 2.在JavaResource中src下创建一个包名称为com.myxq.servlet 3.在创建的servlet包当中创建一个class文件起名 ...

  3. html苹方字体

    苹方提供了六个字重,font-family 定义如下: 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-fami ...

  4. idea docker docker-compose发布springboot站点到tomcat

    允许docker被远程访问 见:https://www.cnblogs.com/wintersoft/p/10921396.html 教程:https://spring.io/guides/gs/sp ...

  5. 基于 Mathematica 的机器人仿真环境（机械臂篇）[转]

    完美的教程,没有之一,收藏学习. 目的 本文手把手教你在 Mathematica 软件中搭建机器人的仿真环境,具体包括以下内容(所使用的版本是 Mathematica 11.1,更早的版本可能缺少某些 ...

  6. 手把手教你 GitLab 的安装及使用

    前言 新入职公司,发现公司还在使用落后生产工具 svn,由于重度使用过 svn 和 git ,知道这两个工具之间的差异,已经在使用 git 的路上越走越远. 于是,跟上级强烈建议让我在公司推行 git ...

  7. flask 实现最简单的登录功能

    视图函数如下: # Sample.py from flask import Flask, render_template, url_for, request, redirect app = Flask ...

  8. 百度开源上传组件webuploader 可上传多文件并带有进度条

    //上传多文件 function UploadMultiFile() { var uploader = WebUploader.create({ // 选完文件后,是否自动上传. auto: true ...

  9. [LeetCode] 556. Next Greater Element III 下一个较大的元素 III

    Given a positive 32-bit integer n, you need to find the smallest 32-bit integer which has exactly th ...

  10. consul ACL 配置范例

    service "dashboard" { policy = "write" } service "dashboard-sidecar-proxy&q ...