CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法
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 实现盒子水平居中、垂直居中和水平垂直居中的方法的更多相关文章
- 用CSS/CSS3 实现水平居中和垂直居中,水平垂直居中的方式
一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...
- 【css】常用的几种水平垂直居中方式与盒子模型,面试经常问到!
div水平垂直居中 假设结构为此,2个div嵌套 <div class="box"> <div class="content">< ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...
- CSS之常见布局|常用单位|水平垂直居中
常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...
- CSS-水平居中、垂直居中、水平垂直居中
1.水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text.图像img.按钮超链接等,只需给父元素设置text-align:center即可 ...
- 《网页布局基础篇》HTML+CSS单列布局--水平居中,垂直居中,水平垂直居中
https://blog.csdn.net/panlu666_pl/article/details/66480433 一.水平居中 子元素在父元素中水平居中 1.使用 text-align和inlin ...
- CSS之水平垂直居中
在css的世界里,如果我们想让一个块级元素水平居中,想必大家都知道利用margin:0 auto;嘛,这样就可以让块级元素在它的父元素中水平居中了. 列如这样: <!DOCTYPE html&g ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
随机推荐
- css3学习之--transition属性(过渡)
一.理解transition属性 W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦 ...
- MYSQL 什么时候用单列索引?什么使用用联合索引?
我一个表 students 表,有3个字段 ,id,name,age 我要查询 通过 name 和age,在这两个字段 是创建 联合索引?还是分别在name和age上创建 单列索引呢? 多个字段查询什 ...
- Python之内置装饰器property
# -*- coding: utf-8 -*- # author:baoshan class Student(object): def __init__(self, name): self.name ...
- 009-MySQL循环while、repeat、loop使用
一.循环使用 mysql常见的三种循环方式:while.repeat和loop循环.还有一种goto,不推荐使用. 前提1.创建基本表结构 # 创建表结构 drop table if exists ` ...
- LinkedBlockingQueue与ArrayBlockingQueue
阻塞队列与普通的队列(LinkedList/ArrayList)相比,支持在向队列中添加元素时,队列的长度已满阻塞当前添加线程,直到队列未满或者等待超时:从队列中获取元素时,队列中元素为空 ,会将获取 ...
- [LeetCode] 45. Jump Game II 跳跃游戏 II
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- 浅谈Java中的Condition条件队列,手摸手带你实现一个阻塞队列!
条件队列是什么?可能很多人和我一样答不出来,不过今天终于搞清楚了! 什么是条件队列 条件队列:当某个线程调用了wait方法,或者通过Condition对象调用了await相关方法,线程就会进入阻塞状态 ...
- tablespace表空间
tablespace——表空间,便于理解,把oracle数据库看作一个实在房间,表空间可以看作这个房间的空间,是可以自由分配,在这空间里面可以堆放多个箱子(箱子可以看作数据库文件),箱子里面再装物件( ...
- BugkuCTF~Misc~WriteUp
1.签到 get flag: Qftm{You should sign in} 2.这是一张单纯的图片 查看图片十六进制 提去特殊字符串进行解码 get flag: key{you are right ...
- Qt信号-槽原理剖析--(1)信号槽简介
唯有创造才是快乐.只有创造的生灵才是生灵.--罗曼·罗兰 信号槽是观察者模式的一种实现,特性如下: A.一个信号就是一个能够被观察的事件,或者至少是事件已经发生的一种通知: B.一个槽就是一个观察者, ...