【盒子居中常用的四种方法】

案例分析：

1.H5结构：两个盒子，大盒子包着小盒子，

2.CSS样式：大盒子pink，小盒子skyblue

3.实现方法：margin外边距法；table-cell布局法；弹性布局法；定位法，其中定位法是我们在书写前端页面中最最最常用的方法，强烈建议使用。

运行结果：

一、margin外边距：先算好上外边距：子盒子自身宽度的一半加上父盒子宽度的一半;再设置左右边距自动即可居中，margin:?px auto;【以上给子盒子即可】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;/* 给父盒子开启隐藏解决父子外边距合并问题 */overflow: hidden;}.box1 {/* 使用margin调整上下左右居中，上边距离是子盒子宽度的一半加上父盒子宽度的一半 */margin: 75px auto 0;width: 50px;height: 50px;background-color: skyblue;}</style>
</head><body><div class="box"><div class="box1"></div></div>
</body></html>

二、table-cell布局：父盒子设置display:table-cell;vertical-align:middle;实现垂直居中；子盒子设置:margin:0 auto;实现水平居中

<style>.box {/* 父盒子宽高背景色 */width: 200px;height: 200px;background-color: pink;/* 给父级设置如下代码转换 *//* table-cell布局 */display: table-cell;/* 完成上下垂直居中 */vertical-align: middle;}.box1 {/* 子盒子一定要margin 0 auto 居于父盒子水平居中 */margin: 0 auto;width: 50px;height: 50px;background-color: skyblue;}</style>
</head><body><div class="box"><div class="box1"></div></div>
</body>

三、flex弹性布局：父盒子设置：display:flex;align-items:center;justify-content:center;即可实现子盒子水平垂直居中

<style>
.box {/* 弹性布局使得所有孩子居中并且具有盒子属性【下三行代码】 */display: flex;align-items: center;justify-content: center;width: 200px;height: 200px;background-color: pink;}.box1 {width: 50px;height: 50px;background-color: skyblue;}</style>
</head><body><div class="box"><span class="box1"></span></div>
</body>

【强烈推荐】四、定位法：

子绝父相先定位子盒子： top:50%;left:50%;transform:translate(-50%,-50%);

    <style>.box {position: relative;width: 200px;height: 200px;background-color: pink;}.box1 {/* 定位法使得垂直居中水平居中 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50px;height: 50px;background-color: skyblue;}</style>
</head><body><div class="box"><div class="box1"></div></div>
</body>

【盒子居中常用的四种方法】相关推荐

PHP取整数函数常用的四种方法
PHP取整数函数常用的四种方法: 1.直接取整,舍弃小数,保留整数:intval(): 2.四舍五入取整:round(): 3.向上取整,有小数就加1:ceil(): 4.向下取整:floor( ...
css中div居中显示的四种方法
css中设置div元素居中显示的四种方法一.先确定div的基本样式二.具体实现方法第一种:利用子绝父相和margin: auto实现第二种:利用子绝父相和过渡动画tranform实现第三种: ...
清除浮动最常用的四种方法
1.为什么要清除浮动开发过程中,浮动是需要掌握的一个技能,页面布局当中,在无法确定子元素的高度(height)时,我们无法给父级标签一个固定的高度(height),我们想要的是,由子元素的高度去控制 ...
抓systrace的常用的四种方法
Systrace是分析性能问题的最基本的工具,那么如何抓取systrace呢? 手机准备好你要进行抓取的界面点击开始抓取(命令行的话就是开始执行命令) 手机上开始操作设定好的时间到了之后,会将生成 ...
JS对象的深拷贝常用的四种方法
1.for循环完成深拷贝 2.通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象. 3.使用拓展运算符+解构赋值(该方法的局限性在于,当值为undefi ...
php 取数值整数的函数是,PHP取整数函数常用的四种方法小结
ceil - 进一法取整说明 float ceil ( float value ) 返回不小于 value 的下一个整数,value 如果有小数部分则进一位.ceil() 返回的类型仍然是 float ...
js判断数据类型常用的四种方法
首先说一下js中的数据类型基本数据类型:String.Number.Boolean.null.undefined.Symbol 引用数据类型:Object 1.typeof const a1 = ...
getElement四种方法返回的不同
当想通过dom在js中获取单个html元素时,常用的四种方法有: getElementById("id") getElementsByClassName("classNa ...
linux忘记root密码怎么办——重置root密码的四种方法
linux忘记root密码之后,可以通过修改bootloader启动项的参数,进入系统,重新通过passwd指令修改root 密码. 下面介绍了常用的四种方法,在不同的场景可以选择不同的方法进行roo ...

【盒子居中常用的四种方法】

【盒子居中常用的四种方法】相关推荐

最新文章

热门文章