css实现水平垂直居中的几种方法
一，已知宽高
1 <style>
2 #box {
3 height: 400px;
4 width: 400px;
5 border: 1px solid grey;
6 position: relative;
7 }
8 .son {
9 height: 300px;
10 width: 300px;
11 border: 1px solid grey;15
16
17 }
18 </style>
19 </head>
20 <body>
21 <div id="box">
22 <div class="son">
23 已知宽高
24 </div>
25 </div>
26 </body>
1. (absolute+负maigin)
1 position: absolute;
2 top: 50%;
3 left: 50%;
4 margin-top: -150px;
5 margin-left: -150px;
2. (absolute+maigin:auto)
1 position: absolute;
2 top: 0;
3 left: 0;
4 right: 0;
5 bottom: 0;
6 margin: auto;
3.（absolute+calc）
这里的50%是父元素宽高的50%
1 position: absolute;
2 top:calc(50% - 150px);
3 left:calc(50% - 150px);
4 （父元素display：flex；子元素：margin: auto）
1 #box {
2 display: flex;
3 }
4 .son {
5 margin: auto;
6 }
二、未知宽高
1，absolute+transform（依赖translate 2d的兼容性）
1 position:absolute;
2 top:50%;
3 left:50%;
4 transform:translate(-50%,-50%);
2，利用flex布局
#box {
display: flex;
align-items: center;
justify-content: center;
}
css实现水平垂直居中的几种方法的更多相关文章
- CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- css如何实现垂直居中（5种方法）
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
随机推荐
- yum随笔
1.一般企业的服务器都能联网,所以装包都是装系统给的或者是自己去第三方的源,如下: http://mirrors.aliyun.com/repo/Centos-7.repo http://mirror ...
- K8S—dashboard ui部署
一.Dashboard UI概述 仪表板是基于Web的Kubernetes用户界面.您可以使用仪表板将容器化应用程序部署到Kubernetes集群,对容器化应用程序进行故障排除,并管理集群本身及其伴随 ...
- Promise async await的用法实例一枚
getlog2() { console.log("222"); }, getlog3() { return new Promise((resolve, reject) => ...
- kafka-集群搭建及启动脚本
集群搭建: [root@localhost kafka_2.11-0.10.2.1]# cat config/server.properties | grep -v ^$ | grep -v ^# b ...
- DVWA-Insecure CAPTCHA(不安全的验证码)
Insecure CAPTCHA,意思为不安全的验证码 全称为Completely Automated Public Turing Test to Tell Computers and Humans ...
- 与NewBing一起写作：《Web应用安全入门》
前言 本文内容基于我的<Web应用安全入门>公开课视频. Prompt:下面是一篇课程音频转录后的文本,请把它转成老师和学生对话形式的文本,要求遵循原文结构,语言衔接流畅,保持 Markd ...
- GO语言学习笔记-包结构篇 Study for Go ! Chapter eight - Package Structure
持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...
- BGF bivariate generating function 双变量生成函数
目录 定义 BGF bivariate generating function horizonal GF 和 vertical GF 例子 组合数 horizonal GF vertical GF ( ...
- 手撕Ford-Fulkerson algorithm 学一半的笔记
目录 定义大概就这些 伪代码 自己做slide里的quiz 搬运别人的代码 我明白了, 余量网络 名如其名 比如你f/c=3/5 那么正边2,reverse edge3,加起来是5 在这个你建的新图上 ...
- Prometheus Operator 与 kube-prometheus 之一-简介
简介 Prometheus Operator Prometheus Operator: 在 Kubernetes 上管理 Prometheus 集群.该项目的目的是简化和自动化基于 Prometheu ...