【HTML+CSS】实现小盒子水平垂直居中大盒子

小div在大div中如何水平垂直居中
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种，下面仅列举了常用
的几种。
首先看一下要实现的效果图及对应的html代码：

// 大盒子嵌套小盒子 小盒子水平垂直居中
<div class="big"><div class="small"></div></div>

1.使用定位实现

* {margin: 0;padding: 0;}.big{position: relative;width: 300px;height:300px;margin: 100px auto;box-sizing: border-box;border:2px solid blue;}.small{position: absolute;width: 100px;height:100px;top:50%;left:50%;margin-top: -50px; /*这里是小盒子高的一半*/margin-left: -50px; /*这里是小盒子宽的一半*/box-sizing: border-box;border:2px solid red;}

使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.

2.使用定位和margin实现

.big{position: relative;width: 300px;height:300px;margin: 100px auto;box-sizing: border-box;border:2px solid blue;}.small{position: absolute;width: 100px;height:100px;margin:auto;top:0;right: 0;bottom: 0;left:0;box-sizing: border-box;border:2px solid red;}

实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子
的居中;

3.使用display:table-cell;

.big{display: table-cell;text-align: center;vertical-align: middle;width: 300px;height:300px;box-sizing: border-box;border:2px solid blue;}.small{display: inline-block;width: 100px;height:100px;box-sizing: border-box;border:2px solid red;}

实现原理:
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签.
组合使用vertical-align,text-align,可以使父元素内的所有行内元素水平垂直居中（也就是将内
部的元素设置display:inline-block）

【HTML+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 ...
前端面试题 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 ...
html设置盒子水平垂直居中,盒子水平垂直居中10种方法
盒子水平垂直居中10种方法 HTML代码第一种:通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素 ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...

【HTML+CSS】实现小盒子水平垂直居中大盒子

1.使用定位实现

2.使用定位和margin实现

3.使用display:table-cell;

【HTML+CSS】实现小盒子水平垂直居中大盒子相关推荐

最新文章

热门文章