如何将一个div盒子水平垂直居中?

1：第一种方法：

<div class="parent">  // 父级盒子<div class="child"><div>   // 子级盒子
</div> <style>
.parent {width: 500px;height: 500px;border: 1px solid #ccc;
}.child {width: 100px;height: 100px;border: 1px solid #eee;
}
</style>
---------------------------------------------
第一中方法:
利用定位 (常用方法)
.parent {position：relative;
}
.child {    // 子绝父相position：absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}
// 定位的原理就是定位中心的盒子在左上顶点,  所以定位之后我们只需要退回盒子一半距离。
----------------------------------------------
第二种方法:  利用内盒子margin: auto;
.parent {position：relative;
}.child {position：absolute;  margin: auto;top: 0;left: 0;right: 0;bottom: 0;
}
// CSS中margin：auto什么意思？margin：auto属性的用法详解
margin:auto可以让元素水平居中的, margin:auto可以让元素水平居中的原因。 auto: 是最常用的用法: 通过分配auto元素的左右边距,  它们可以平等地占据元素容器中的可用水平空间
-----------------------------------------------------------------
第三种方法：
父元素设置display 属性,  设置垂直 水平居中
.parent {display: flex;justify-content: center;  // 水平居中align-items: center;   // 垂直居中
}
---------------------------------------------------------------
第四种方法:  利用display: table-cell
.parent {display: table-cell;vertical-align: middle;text-align: center;
}
.child {display： inline-block;
}
组合使用display: table-cell 和 vertical-align,  text-align,  使父元素所有元素, 所有元素行内元素垂直水平居中(内部的div设置 display: inline-block即可)
---------------------------------------------------------------
第五种方法:
.parent {position: relative;
}
.child {positon: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
--------------------------------------------------------------
第六中方法： 利用calc 计算
.parent {positon：relative;
}
.child {positon: absolute;top：cale(200px);  // (父元素高 - 子元素高) / 2 = 200px;left： cale(200px); //  (父元素宽 - 子元素宽) / 2 = 200px;
}

如何将一个div盒子水平垂直居中?相关推荐

HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
CSS实现div盒子水平垂直居中的方式
网上看到有很多方式,这里记录一下我用起来顺手的几种方式,这里敲黑板做笔记,哈哈~~ <div id='container'><div class='middle'></d ...
div盒子水平垂直居中的方法
一.盒子没有固定的宽和高方案1.Transforms 变形这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义transform: translate(-50%, ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
div盒子水平垂直居中的几种方式
1. div水平居中 div{width:100px;height:100px;margin:0 auto; } 2. div水平垂直居中这里要有两层或者给body设置高度100vh,然后给元素设置 ...
如何实现div盒子水平垂直居中
关于如何使一个小盒子在大盒子中水平垂直居中有很多方法,下面将列举常用的几种: ###html 代码 <div class="parent"><div class= ...
div盒子水平垂直居中以及表格的居中的方法
目录多种水平垂直居中方法这里的方法和第二种一致,方便用来对系统后台进行布局 #admin {position: absolute;top: 50%;left: 50%;margin-top: -1 ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS02_设置盒子水平+垂直居中设置文本水平+垂直居中
写在前面:此贴为CSS高频题,针对盒子模型的水平+垂直居中,还提到了其内部文字的居中,如有补充,请留下评论 HTML代码结构: <body><div class="box- ...

如何将一个div盒子水平垂直居中?

如何将一个div盒子水平垂直居中?相关推荐

最新文章

热门文章