描述

有如下模型,想办法让

<style>.box{width: 500px;height: 500px;background: skyblue;}
</style>
<div class="box"><div class="inner"></div>
</div>

想办法让inner在box中水平垂直居中

方案1: 使用绝对定位

让子盒子相对于父盒子绝对定位,
然后距离左/上边50%,
在将外边距设为盒子宽/高的一半
代码如下:

.box{position: relative;width: 150px;height: 150px;background: skyblue;
}
.inner{position: absolute;width: 50px;height: 50px;left:  50%;top: 50%;margin-left: -25px;margin-top: -25px;background: lightcoral;
}

方案2: 使用transform

上面需要手动移动子盒子的宽高,即每次都要计算子盒子的宽高/2,
可以尝试使用CSS3的transform属性,将盒子在水平和垂直方向移动-50%
代码如下:

.inner {position: absolute;width: 50px;height: 50px;left: 50%;top: 50%;transform: translate(-50%, -50%);background: lightcoral;
}

方案3: margin…

此方法比较奇怪…
思路是利用绝对定位,让盒子的left top right bottom全部为0,然后设置margin为auto
代码如下

.inner {position: absolute;width: 50px;height: 50px;left: 0;top: 0;right: 0;bottom: 0;margin: auto;background: lightcoral;
}

方案4: 使用js

使用js先获取父盒子的宽/高
在获取子盒子的宽高,然后使用绝对定位,将左边距设置为 (父盒子宽 - 子盒子宽) / 2

<script>var box = document.querySelector('.box')var inner = document.querySelector('.inner')// 父盒子 宽高var bW = box.offsetWidthvar bH = box.offsetHeight// 子盒子 宽/高var iW = inner.offsetWidthvar iH = inner.offsetHeightinner.style.position = 'absolute'inner.style.left = (bW - iW) / 2 + 'px'inner.style.top = (bH - iH) / 2 + 'px'
</script>

方案5: flex布局

个人认为最简单最棒的一种布局
只需设置父元素的布局为flex布局,然后设置 justify-content和align-items属性
代码如下:

<style>
.box {display: flex;justify-content: center;align-items: center;width: 150px;height: 150px;background: skyblue;
}
.inner {width: 50px;height: 50px;background: lightcoral;
}
</style>

方案6: table-cell

思想是将子盒子变成文本的形式(inline-block)
然后向控制文本水平垂直居中

<style>.box {display: table-cell;text-align: center;vertical-align: middle;width: 150px;height: 150px;background: skyblue;}.inner {display: inline-block;width: 50px;height: 50px;background: lightcoral;}
</style>

css --- [小结]让盒子水平垂直居中的解决方案相关推荐

css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
HTML/CSS 变形（盒子水平垂直居中）、过渡、动画（学习整理）
变形 transform:scale(*) >1放大 0-1缩小 <1基于中心点对称 transform:rotate(?deg) deg(度数) 正值-顺时针旋转负值-逆时针旋转 tr ...
CSS实现div盒子水平垂直居中的方式
网上看到有很多方式,这里记录一下我用起来顺手的几种方式,这里敲黑板做笔记,哈哈~~ <div id='container'><div class='middle'></d ...
【HTML+CSS】实现小盒子水平垂直居中大盒子
小div在大div中如何水平垂直居中关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: // 大盒子嵌套 ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中
写在前面:此贴为CSS高频题,针对盒子模型的水平+垂直居中,还提到了其内部文字的居中,如有补充,请留下评论 HTML代码结构: <body><div class="box- ...
CSS display: table-cell 用于水平垂直居中
CSS display: table-cell 用于水平垂直居中在 CSS 设置居中时候,水平和垂直居中的设置略有不同,通常我们使用 text-align:center 对图片.文字等行内元素(in ...
HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...

css --- [小结]让盒子水平垂直居中的解决方案

描述

方案1: 使用绝对定位

方案2: 使用transform

方案3: margin…

方案4: 使用js

方案5: flex布局

方案6: table-cell

css --- [小结]让盒子水平垂直居中的解决方案相关推荐

最新文章

热门文章