学习笔记（一）

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

文章目录

学习笔记（一）
前言
一、绝对定位法
- 1.方法一
- 2.方法二
- 3.方法三
- 4.方法四
二、flex布局法
- 1.方法五
三、将小div转成行内块
- 1.方法六
四、网格布局
- 1.方法七
总结

前言

在写小demo过程中，经常会遇到需要将一个div水平和垂直两个方向同时居中的情况，针对这种情况，我们有几种方法可以实现

提示：以下是本篇文章正文内容，下面案例可供参考

一、绝对定位法

绝对定位方式可分为以下三种方法：

1.方法一

在绝对定位下，top bottom left right四个值都为 0，margin:auto。

代码如下（实例）：

html:

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

css:

 .box{width: 500px;height: 500px;border: 3px solid #f00;position: relative; text-align: center;line-height: 500px;}.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}

效果展示：

2.方法二

这种方法可以直接不用管盒子宽高具体数值，在绝对定位下，top left 都设为 50% ，然后用平移的方法向左、向上分别移动小盒子的50% （ transform: translate(-50%, -50%); ）
代码如下（实例）：
（这里html代码一样，我就不多赘述了~）

css:

.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

3.方法三

这种方法和方法二差不多，但是前提是得知道子盒子宽高的具体数值。
在绝对定位下，left top 都设为 50% ，然后用margin的方法，左、上外边距分别为子盒子宽、高的一半像素的负值
代码如下（实例）：
（这里html代码一样，我就不多赘述了~）

css:
这里子盒子宽高都是100px，所以外边距的值为 margin: -50px 0 0 -50px;

.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left: 50%;top: 50%;margin: -50px 0 0 -50px;}

4.方法四

在绝对定位下，利用calc() 函数动态计算实现水平垂直居中
代码如下（示例）：
css
left:calc((400px - 200px)/2);
top:calc((160px - 50px)/2);

.box{width: 500px;height: 500px;border: 3px solid #f00;position: relative;
}.small{width: 100px;height: 100px;background-color: #00f;position: absolute;left:calc((500px - 100px)/2);top:calc((500px - 100px)/2);
}

二、flex布局法

1.方法五

为子盒子的父级元素添加flex方法

代码如下（示例）：
display: flex;
align-items: center;
justify-content: center;
css:

.box {width: 500px;height: 500px;border: 3px solid #f00;display: flex;align-items: center;justify-content: center;
}.small {width: 100px;height: 100px;background-color: #00f;
}

三、将小div转成行内块

1.方法六

在小div后，新增span标签，给小盒子设置vertical-align:middle
给大盒子设置line-height为大盒子高度，text-align:center

代码如下（示例）：

html:

<div class="box"><div class="small"></div><span></span>
</div>

css:

.box {width: 500px;height: 500px;border: 3px solid #f00;
}.small{width: 100px;height: 100px;background-color: #00f;display: inline-block;/* 修饰的是行内块垂直的对齐方式参考谁进行垂直对齐 - 当前行*/vertical-align: middle;
}

四、网格布局

1.方法七

为子盒子的父元素添加 grid 变成网格布局，设置成一行一列的网格，再将其垂直水平居中。

代码如下（示例）：

grid-template-columns: 100px;
grid-template-rows: 100px;
justify-content: center;
align-content: center;
css:

.box {width: 300px;height: 300px;border: 3px solid #f00;margin: 200px auto;display: grid;grid-template-columns: 100px;grid-template-rows: 100px;/* justify-content: center;align-content: center; *//* 复合写法  垂直对齐方式  水平对齐方式*/place-content: center center;
}.small {width: 98px;height: 98px;border: 1px solid blue;
}

总结

以上就是如何将小div水平垂直居中的七种方法啦！

多总结，多积累

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

让一个 div 水平垂直居中的几种方法
水平垂直居中有好多种实现方式,主要就分为两类:不定宽高和定宽高,以在body下插入一个div为例: 定宽高使用定位+margin element.style {position: absolute; ...
未知宽高div水平垂直居中的3种方法
方法一 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
1.text-align:center实现图片水平居中 text-align一般用于文本的水平居中,也可以用于图片,代码如下: CSS部分: div{ text-align:center; width ...
高度不定垂直居中_经典：CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
CSS中垂直居中的七种方法
前言: 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题 ...
div水平垂直居中问题以及解决方法的兼容性
Ⅰ.绝对定位居中(Absolute Centering)技术我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中--实际上,实现垂直居中仅需要声明元素 ...

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

学习笔记（一）

文章目录

前言

一、绝对定位法

1.方法一

2.方法二

3.方法三

4.方法四

二、flex布局法

1.方法五

三、将小div转成行内块

1.方法六

四、网格布局

1.方法七

总结

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

最新文章

热门文章