前端面试中,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 是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属性指定定位方式,利用CSS盒模型实现定位布局。
2.1 内部div使用 margin 属性居中
2.2 内部 div 使用 transform 属性居中
实现结果如下:
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; 元素仅会水平居中,并不会进行垂直居中。此时就需要设置元素的 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 来实现。但是,使用的同时还需要结合其他属性才完整实现。因为,单是设置 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标签的高度和宽度,大家都学会了吗?
*请认真填写需求信息,我们会在24小时内与您取得联系。