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. [C++] namespace命名空间和using用法

    命名空间namespace:指标识符的各种可见范围. C++标准程序库中的所有标识符都被定义在一个std的namespace,这就是程序开始添加 using namespace std; 的原因. 很 ...

  2. Phpoffice 已经弃用

      Package phpoffice/phpexcel is abandoned, you should avoid using it. Use phpoffice/phpspreadsheet i ...

  3. 通过OpenSSL来生成PEM格式的私钥、PKCS8格式的私钥、公钥|pfx格式的私钥、cer格式的公钥

    1.生成PEM格式RSA私钥 不对输出的文件内容进行加密 openssl genrsa -out private-rsa.key 对输出的文件内容进行加密(DES/AES128/AES256等) op ...

  4. asp.net core mvc 读取appsettings.config中文乱码问题

    asp.net core mvc 读取appsettings.config中文乱码问题的解决方法如下: 用记事本打开appsettings.config,另存为的时候,编码设置为 “UTF-8”,

  5. RSA 签名、验证、加密、解密帮助类

    import java.io.IOException; import java.security.InvalidKeyException; import java.security.KeyFactor ...

  6. 基于Emit的C#下DataTable转实体类方法,一直报错.

    xxxx ;WITH Tab AS ( SELECT CAST(ROW_NUMBER()OVER(ORDER BY CC.CreateTime DESC) AS INT) AS Sequency, ) ...

  7. base64方式显示控件

    data:,文本数据 data:text/plain,文本数据 data:text/html,HTML代码 data:text/html;base64,base64编码的HTML代码 data:tex ...

  8. 容器版jenkins使用宿主机的docker命令

    参照里面的第一步里面的dockerfile: https://www.cnblogs.com/effortsing/p/10486960.html

  9. [LeetCode] 45. Jump Game II 跳跃游戏 II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  10. [LeetCode] 294. Flip Game II 翻转游戏 II

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...