css盒子水平垂直居中的几种方式
第一种：son盒子中定位的上下左右全部为0，然后margin：auto
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 .box{
14 position: relative;
15 width: 500px;
16 height: 500px;
17 background-color: antiquewhite;
18 }
19 .son{
20 position: absolute;
21 top: 0;
22 right: 0;
23 bottom: 0;
24 left: 0;
25 margin: auto;
26 width: 200px;
27 height: 200px;
28 background-color: skyblue;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="box">
34 <div class="son"></div>
35 </div>
36 </body>
37 </html>
第二种：top50%，left50%，然后使用transform: translate(-50%,-50%); ***我最常用的
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 .box{
14 position: relative;
15 width: 500px;
16 height: 500px;
17 background-color: antiquewhite;
18 }
19 .son{
20 position: absolute;
21 top: 50%;
22 left: 50%;
23 transform: translate(-50%,-50%);
24 width: 200px;
25 height: 200px;
26 background-color: skyblue;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="box">
32 <div class="son"></div>
33 </div>
34 </body>
35 </html>
第三种
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 .box{
14 position: relative;
15 width: 500px;
16 height: 500px;
17 background-color: antiquewhite;
18 }
19 .son{
20 position: absolute;
21 top: 50%;
22 left: 50%;
23 margin: -100px -100px;
24 width: 200px;
25 height: 200px;
26 background-color: skyblue;
27 }
28 </style>
29 </head>
30 <body>
31 <div class="box">
32 <div class="son"></div>
33 </div>
34 </body>
35 </html>
css盒子水平垂直居中的几种方式的更多相关文章
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- css实现水平垂直居中的几种方式
梳理下平时常用css水平垂直居中方式- 使用flex布局 HTML <div class="box"> <div class="child"& ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...
- [CSS] 子元素垂直居中的两种方式
1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...
- 你知道CSS实现水平垂直居中的第10种方式吗？
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- CSS实现水平垂直居中的方式有哪些？
CSS实现水平垂直居中的方式有哪些? 基本结构样式: .box { width: 400px; height: 400px; background-color: red; } .inner { wid ...
- CSS（九）：设置盒子水平垂直居中
通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）
本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE ...
随机推荐
- XML_DTD_20200415
<!-- xml的注释写法 --> 格式良好的xml语言必须具备的几个条件 1.必须有xml声明语句,声明版本号与编码字符集 2.必须有且仅有一个根元素 3.标签大小写敏感 4.属性值 ...
- 02 HTML基础-图片和音视频
1.HTML中的图片 HTML5的<figure>和<figcaption>为图片提供了一个语义容器,在标题和图片之间建立了清晰的联系.<figcaption>元素 ...
- String当中的intern()
public class String001 { public static void main(String[] args) { String s1 = "hello"; Str ...
- TCP idle timeout 和TCP Keepalive 比较和分析
TCP idle timeout 和TCP Keepalive 是两个独立的功能. TCP idle timeout TCP idle timeout 是系统TCP配置文件中的空闲超时设 ...
- word多级标题自动编号设置
1.选择段落 ->多级列表 ->定义新的多级列表 2.级别设置 ,这里操作比较繁琐,要多注意[输入编号的格式]要通过[包含的级别编号来自]这一项目来设定 标题1: 标题2 标题3: 标题4 ...
- python之自动化连连看脚本-第一关不动-小记
(如想转载,请联系博主或贴上本博地址) 仅供学习python之用,勿用做商业用途.运行环境为1920*1080屏幕,python3.7,win7,谷歌浏览器版本 75.0.3770.100. 参考ht ...
- vsftpd配置FTP服务器（Centos7.x安装）
安装配置 1. 安装vsftpd 检查是否安装了vsftpd # rpm -qa | grep vsftpdvsftpd-2.2.2-24.el6.x86_64 如果有展示则已经安装,不需要重新安装 ...
- Leftpad事件 我们是不是早已忘记该如何好好地编程？
多年前的Leftpad 撤包事件使得React . Babel 和许多流行的npm模块都受到波及,无法正常运行. 这些受到影响的模块都引入了一个叫做 left-pad 的模块. 以下就是这十一行代码: ...
- 针对于Sql server突然连接不到服务器的解决方法
问题叙述 点击连接之后,总是会弹出一个错误弹窗: 方法解决 快捷键Win+R,输入services.msc,进入到服务界面: 找到SQL 代理(DEV) 将手动打开改成自动 再连接试一次 连上啦! ( ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——14.屏幕显示原理与文本模式
学习操作系统原理最好的方法是自己写一个简单的操作系统. 一.屏幕显示原理 电脑显示器屏幕是由很多很小的像素组成的.每个像素就像是一个小灯泡,在屏幕上一排一排的整齐排列着.只要能控制每个像素的颜色就能显 ...