整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

实现div水平垂直居中的7种方式

前端面试中,CSS相关的问题一般不会问的太多,但是有一个问题经常被选为面试题。那就是:div 水平垂直居中你有哪些办法?

这道题可以考察候选人对CSS布局方式的理解,而且非常贴近日常工作,比较适合作为面试题。今天我就帮大家梳理一下CSS实现div水平垂直居中的方法,建议收藏。


为了演示,首先创建两个嵌套的 div,然后设置一下大小和背景颜色这样比较容易看出效果。代码如下:

// html
<div class="outer outer-box">
  <div class="inner inner-box"></div>
</div>

// css
<style>
.outer {
  height: 100px;
  width: 100px;
  background-color: royalblue;
}
.inner {
  height: 50px;
  width: 50px;
  background-color: red;
}
<style>

设置完的效果就是这样,然后我们需要把内部的div 水平垂直居中。准备就绪,正式开始。我们分别使用 Flex 布局,Position布局, Grid布局三种方式。


flex布局

Flex 是Flexible Box的缩写,意为”弹性布局”。Flexible Box 模型是一种一维的布局模型,一次只能处理一个维度上的布局。flex布局有两根轴线,主轴和交叉轴。flex就是根据这两个轴线布局元素。

1.1 对外层div设置flex布局

在外层 div 上设置 justify-content: center; align-items: center; 属性, display 设置为 flex。即可实现水平垂直居中。

1.2 内外div分别设置


结果如下图:

Flex实现水平处置居中


Position布局

Position布局是传统的布局方式,position属性指定定位方式,利用CSS盒模型实现定位布局。

2.1 内部div使用 margin 属性居中

2.2 内部 div 使用 transform 属性居中

实现结果如下:

Grid布局

Grid(网格)布局被称为最强大的CSS布局方案,它可以将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。

上面这种布局,Grid非常擅长。Flex布局属于一维布局,Grid布局可以将容器分为行和列,对单元格进行布局,属于二维布局。


3.1 外层div使用 place-content 属性

3.2 外层div使用Grid布局

3.3 内外div分别设置

实现结果如下:

总结

常见的问题也不见得简单,前端知识还是常学常新的。了解不同类型的CSS布局方式,对处理实际问题也很有帮助。

以上就是CSS实现div水平垂直居中的7种方式。如果你有别的方式,欢迎和大家一起分析。

如果觉得文章对您有帮助,欢迎收藏,转发~

SS 是前端里面的基础之一,也是非常重要的一部分,它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中,总会有将元素或者文字进行水平垂直居中的要求。下面w3cschool编程狮就为大家介绍 CSS 中几种常用到的水平垂直居中的方法。


一、使用 margin:auto

当元素有给定的高度以及宽度的时候,使用 margin: auto; 元素仅会水平居中,并不会进行垂直居中。此时就需要设置元素的 position 为 absolute,父级元素的 position 为 relative,同时元素的上下左右都需要设置为 0。

HTML 代码

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

CSS 代码

.box{
  width: 200px;
  height: 200px;
  background-color: #eee;
  position: relative;
  margin-top: 20px;
}
.center1{
  width: 50px;
  height: 50px;
  background-color: #00ACED;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

效果展示:



二、使用 position:absolute

当已经知道了要进行水平垂直居中的元素的宽高时,就可以通过设置 position: absolute 来实现。但是,使用的同时还需要结合其他属性才完整实现。因为,单是设置 absolute,上左距离均为一半,就会出现下面这种情况。很显然可以看到,元素并不是完全居中,仅只有左上角的位置在中心点

概念图:

因此想要实现元素完全水平垂直居中,在设置了 absolute 定位后,可以设置 margin 值为负,或者使用 calc 来计算,上左距离在 50% 的基础上还要减去元素本身一半的宽高。

margin 值为负或者 calc 计算均是在已知元素宽高的情况下,假设不知道元素的宽高,那么怎么实现水平垂直居中呢?这里就可以使用 transform 属性,通过坐标位移来实现居中。

CSS 代码

/* 结合 margin */
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/* 结合 calc 计算*/
.center2{
  width: 50px;
  height: 50px;
  background-color: #7FFFD4;
  position: absolute;
  left: calc(50% - 25px)
  top: calc(50% - 25px);
}
/* 结合 transform */
.center2{
width: 50px;
height: 50px;
background-color: #7FFFD4;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

效果展示



03

PART

三、使用弹性布局

可以通过弹性布局来设置水平垂直居中,这里需要设置父级元素 display:flex; 还需要设置两个属性,水平布局 justify-content 以及垂直布局 align-items。

HTML代码

<div class="box2">
  <div class="center4"></div>
</div>

CSS代码:

.box2{
  background-color: #eee;
  width: 200px;
  height: 200px;
  position: relative;
  margin-top: 20px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center4{
  width: 50px;
  height: 50px;
  background-color: #B39873;
}

效果展示:


四、文本水平对齐和行高

前面介绍的是元素如何实现水平垂直居中,下面介绍的是如何将文字进行水平垂直居中。这第一个方法也是最经常用的,使用文本水平对齐 text-align 和行高 line-height 来实现的。

HTML 代码

<div class="box3">
  <div class="center5">文字居中</div>
</div>

CSS 代码

.box3{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
}
.center5{
  text-align: center;
  line-height: 200px;
}

效果展示


05

PART

五、使用网格布局

第二个方法可以通过网格布局 grid 来实现。而这里通过 grid 有两种方式实现,一种对元素本身属性进行设置,另一种在元素的父级元素中设置。两者看上去内容似乎差不多,不同的是在元素中设置的是 align-self 还要多了一个 margin,父级元素中是 align-items。

相关代码:

/* grid 元素中设置 */
.box4{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
}
.center6{
  align-self: center;
  justify-content: center;
  margin: auto;
}
/* grid 父级元素中设置 */
.box5{
  background-color: #eee;
  width: 200px;
  height: 200px;
  margin-top: 20px;
  display: grid;
  align-items: center;
  justify-content: center;
}

效果展示:


六、总结

以上就是关于 CSS 如何将元素或者文字进行水平垂直居中的几种常用方法,大家还其他关于 CSS 实现水平垂直居中的方法吗?请在评论区留下你的想法。

关注w3cschool编程狮订阅更多IT资讯、技术干货~

由于前端所设计的领域太多,每篇文章所能讲述的知识点太多,对于读者来说不太好消化,因此以后基本是采用一篇文章一个知识点来写作。

今天这篇文章主要讲解css中a标签的高度和宽度问题。

css

问题描述

在采用div+css的方式布局页面时,对于超链接a标签,无法设置其高度和宽度,即使对其设置了width和height属性,也不会生效。

我们通过如下例子来看看。

给a标签设置了如下css属性。

css属性

但是从下图可以看出,a标签的高度和宽度没有发生变化,仍然是122px*22px。

实际效果

问题原因

为什么会出现这个情况呢?

因为a标签属于行内元素,行内元素是无法直接设置高度和宽度的。

遇到这个问题,我们该怎么解决呢,主要有以下几个方法。

解决方法1-设置块级元素

既然行内元素无法设置高度和宽度,那么我们将其设置为块级元素呢?

我们对a标签设置以下的样式。

设置display:block

我们可以看出a标签的高度和宽度发生了变化,而且在设置为块级元素后,占据了一整行的位置。

高度发生变化

解决方法2-设置浮动

通过将a标签设置为浮动状态,同样可以改变其高度和宽度。

我们给a标签设置以下css样式。

设置为浮动元素

我们可以看出a标签的高度和宽度发生了变化,并且其占据的宽度和设置的width属性一样,与方法1呈现的不一样。

改为浮动元素

方法3-设置padding属性

在设置padding属性的时候,不能直接改变a标签的高度和宽度,实际是一种模拟的状态。

而且需要注意的是在设置padding-top和padding-bottom时是不生效的,即使从控制台看元素显示占据了空间,但不会影响页面的布局。因此在设置padding属性时,实际只会影响到a标签的宽度。

我们给a标签设置以下padding属性。

设置padding属性

我们可以看出a标签占据的高度和宽度发生了变化,但是实际只是宽度占据的空间发生变化,高度不变。

设置padding属性

结束语

今天这个简单的知识点:设置a标签的高度和宽度,大家都学会了吗?