css 水平+垂直居中
文章目录
- 0、body 内容
- 0、效果图
- 一、BFC & margin
- 二、position & translate
- 三、display:flex(弹性布局)
- flex属性
- 四、display:table-cell
- 五、其他
0、body 内容
<body><div class="d1"><div class="d2"><span>222</span></div></div>
</body>
0、效果图
一、BFC & margin
已知父子宽高!!!给父元素 overflow: hidden;(BFC),父子 margin 就不会共用
BFC: 块格式化上下文(Block Formatting Context)
<style>.d1 {margin: 100px;width: 300px;height: 300px;background-color: beige;overflow: hidden;}.d2 {width: 100px;height: 100px;margin: 100px;background-color: blue;/* 文本垂直和水平居中 */line-height: 100px;text-align: center;}
</style>
二、position & translate
transform:变化
translate:转动,移动
<style>.d1 {margin: 100px;width: 300px;height: 300px;background-color: beige;position: relative;}.d2 {width: 100px;height: 100px;top: 50%; /* 让盒子顶部距离父顶部一半 */left: 50%; /* 让盒子左部距离父左部一半 */transform: translate(-50%, -50%); /* 让盒子中心点落在中间 */position: absolute;background-color: blue;/* 文本垂直和水平居中 */line-height: 100px;text-align: center;}
</style>
三、display:flex(弹性布局)
flex小游戏
flex属性
:第一个值为默认值
- flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap: nowrap | wrap | wrap-reverse;
- flex-flow:
<flex-direction> <flex-wrap>
- justify-content: flex-start | flex-end | center | space-between | space-around;
:项目在交叉轴的对齐方式
:baseline:文字会在一条直线上
:stretch为默认值(项目高度==容器的高度,内容太多会溢出!直系子元素没有设置高度才有效)
:align-content:定义多根轴线的对齐方式(只有一行时不起作用)
- align-items: flex-start | flex-end | center | baseline | stretch;
- align-content: flex-start | flex-end | center | space-between | space-around | stretch;
项目的属性
order:
<number>
; / 排序(数值大向右走) default 0 /
flex-grow:<number>
; / 放大比例 default 0 /
flex-shrink:<number>
; / 缩小比例(只有当空间不足时有效) default 1 /
flex-basis:<length>
; / default auto (可以用px等)/
flex: 前三个的简写(推荐) / default 0 1 auto /
align-self: 单个项目的 align-items,默认auto,表示继承父元素的
<style>.d1 {margin: 100px;width: 300px;height: 300px;background-color: beige;display: flex;align-items: center; /* 垂直居中(轴线在父元素垂直方向上的中间) */justify-content: center; /* 水平居中(项目在轴线中间) */}.d2 {width: 100px;height: 100px;background-color: blue;/* 文本垂直和水平居中 */line-height: 100px;text-align: center;}
</style>
四、display:table-cell
<style>.d1 {margin: 100px; /* margin无效,padding有效!!! */width: 300px;height: 300px;background-color: beige;/* 垂直居中 middle */display: table-cell;vertical-align: middle;}.d2 {width: 100px;height: 100px;background-color: blue;margin: auto; /* 水平居中 *//* 文本垂直和水平居中 */line-height: 100px;text-align: center;}
</style>
五、其他
1.如上(若不是行元素 display:inline): line-height (已知宽高)
2.父相对和子绝对定位 : top(和其他三个): 0; margin: auto;
css 水平+垂直居中相关推荐
- html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
- css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 <div ...
- CSS 水平垂直居中
方法一: 容器确定宽高:知识点:transform只能设置在display为block的元素上. <head> <meta charset="UTF-8"> ...
- css水平垂直居中四种常用方式
css水平垂直居中 第一种:flex布局水平垂直居中 思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
- css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
- CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
- css水平垂直居中对齐方式
css水平垂直居中总共有四种方法 ① 使用绝对定位 注意:使用绝对定位居中需要固定宽高 position:absolute; top:0; left:0; bottom:0; right:0; wid ...
- 16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
- css 水平垂直居中那些事
本文是在参考众大神文章基础上,整理的几个常用方案,另外也掺杂个人的一些猜想,如有不妥,请不吝指出 下面开始正题,为了方便验证+展示,下面的案例我会直接附上个人验证的源码+截图 1. <!doct ...
- CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述 通过 Flexbox 布局模块 与 CSS Grid布局模 实现容器的居中 ...
最新文章
- 拖拉机也将自动驾驶,日本劳动力短缺大力发展无人农业
- 清华姚班2019级新生来了:高考状元、奥赛金牌,也是一批被AI感召的00后
- python中取整数的几种方法
- java读取属性文件的方法_java读取属性文件的方法
- CSS布局最常用属性float(浮动)和position(定位)
- sklearn机器学习常用过程总结
- 如何在JSP里使用Java bean
- 一加6怎么刷android p6,一加6秒速跟进安卓P 教你尝鲜速成开发者
- WGZX:javaScript 学习心得--1
- 机载激光雷达测量技术及工程应用实践_倾斜摄影与激光雷达技术在实景三维测量应用中的比较...
- mysql slave_mysql master slave
- 金融matlab创建3x3数组,Matlatb金融时间序列工具箱——建立金融时间序列
- 【mongoDB实战】mongoDB数据导入和导出
- gitee java pdf转图片_openOffice word转pdf,pdf转图片优化版
- ubuntu18.04: 安装nanomsg
- html如何实现雪花飘落,如何使用HTML5 canvas实现雪花飘落
- OpenCV更改图片颜色
- 移动App Store测试的“七宗罪”
- 如何把产品打造成有生命的品牌
- 阿里官方Java代码规范标准《阿里巴巴Java开发手册 终极版 v1.3.0》下载
热门文章
- 银川计算机中专学校,2021年银川有哪些中专学校,银川比较好的中专学校名单
- 20 致远OA场景-流程事件
- DICOMRT-DiTools:clouddicom源码解析(1)
- android 油耗管理app,油耗记录软件下载-油耗记录appv1.0.0 安卓版-腾牛安卓网
- 第一章 FreeBSD之系统安装
- 14152学期校内岗招聘信息
- Any to Any 实时变声的实现与落地丨RTC Dev Meetup
- 如何学好PROE软件?
- 数学分析:L‘Hospital 法则
- 华道生物IPO被终止:曾拟募资3.2亿 新希望投资是股东