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 ...
随机推荐
- 更新kubeadm kubernets平台证书
证书过期失效: Unable to connect to the server: x509: certificate has expired or is not yet valid 更新证书: 1.查 ...
- mysql-开启日志记录功能
开启日志记录功能 -- 开启功能 SET GLOBAL general_log = ON; -- 保存到文件 SET GLOBAL log_output = 'file'; 查看日志内容 -- 查看日 ...
- axios的cancelToken
参考的博客地址 核心代码 import axios from 'axios' // Base64可自行安装依赖或实现 import Base64 from './Base64' class Pendi ...
- vue3.0知识整理与总结
在性能方面,对比Vue2.x,性能提升了1.3~2倍左右:打包后的体积也更小了. 非兼容的功能 一些和Vue2.x版本改动较大的语法,在Vue3存在兼容问题 v-modal 组件通信 v-for ...
- ASM1117脚位图
- angularJS：一个页面多个ng-app
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { $scop ...
- 白鹭egret 控制屏幕方向
this.stage.orientation=fangxiang; fangxiang值: portrait landscape auto
- DRF_基本使用
基本使用 视图内 from rest_framework.viewsets import ModelViewSet from app01 import models from app01 import ...
- CSS伪类三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- gorm操作sqlite3，高并发读写如何避免锁库？
1. 场景 这两天一直被这个sqlit3困扰,起因是项目中需要有这样一个中间,中间件承担着API角色和流量转发的角色,需要接收来自至少300个agent的请求数据,和健康检测的请求. 所以当即想到用g ...