div水平垂直居中的六种方法

在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。

方法一:

　　绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

　　图片展示：

　　代码如下：

div{background:red;position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);
}

方法二:

　　绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

　　图片展示：如方法一的图片展示

　　代码如下：

div{width:600px;height: 600px;background:red;position: absolute;left:50%;top:50%;margin-left:-300px;margin-top:-300px;
}

方法三：

　　绝对定位方法：绝对定位下top left right bottom 都设置0

　　图片展示：如方法一的图片展示

　　代码如下：

<!--html-->

<div class="child">我是子级</div>
/**css**/
div.child{width: 600px;height: 600px;background: red;position:absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto;
}

方法四:

　　flex布局方法：当前div的父级添加flex css样式

展示图如下：

　　代码如下：

<!--html-->

<div class="box"><div class="child">child</div>
</div>

/**css**/

.box{height:800px;-webkit-display:flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;border:1px solid #ccc;
}
div.child{width:600px;height:600px;background-color:red;
}

方法五:

　　table-cell实现水平垂直居中: table-cell middle center组合使用

展示图如下：

代码如下：

<!--html-->

<div class="table-cell"><p>我爱你</p>
</div>

/**css**/

.table-cell {display: table-cell;vertical-align: middle;text-align: center;width: 240px;height: 180px;border:1px solid #666;
}

方法六:

　　绝对定位：calc() 函数动态计算实现水平垂直居中

　　展示图如下：

　　代码如下：

<!--html-->
<div class="calc"><div class="child">calc</div>
</div>
/**css**/
.calc{position: relative;  border: 1px solid #ccc;  width: 400px;  height: 160px;
}
.calc .child{position: absolute;  width: 200px;  height: 50px;left:-webkit-calc((400px - 200px)/2);top:-webkit-calc((160px - 50px)/2);left:-moz-calc((400px - 200px)/2);top:-moz-calc((160px - 50px)/2);left:calc((400px - 200px)/2);top:calc((160px - 50px)/2);
}

转载于:https://www.cnblogs.com/a-cat/p/9019184.html

div水平垂直居中的六种方法相关推荐

让div水平垂直居中的六种方法
** 方法一:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;) ...
移动web-使一个盒子水平垂直居中的六种方法
方法一:利用定位(常用) <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
如何实现不定宽高的div水平垂直居中
如何实现不定宽高的div水平垂直居中第一个方法:我们使用定位给父元素positon:relative,定位到中间 div{ position:absolute; top: 50%; left: 50 ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...
关于DIV嵌套（二）：div嵌套div水平垂直居中
div嵌套div水平垂直居中可以使用position定位来实现,这是最常用的方法. <!DOCTYPE html> <html><head><meta cha ...
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
html设置盒子水平垂直居中,盒子水平垂直居中10种方法
盒子水平垂直居中10种方法 HTML代码第一种:通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素 ...
前端面试系列-CSS基础-div水平垂直居中文本居中(单行文字、多行文字)
文章目录一.div水平垂直居中 1.flex 2.position (元素已知宽高) 3.position transform (元素未知宽高度) 4.position(元素已知宽度)maigin: ...

div水平垂直居中的六种方法

div水平垂直居中的六种方法相关推荐

最新文章

热门文章