1.弹性盒子

给父元素设置

display：flex;

justify-content:center;

align-items:center;

        .father {width: 200px;height: 200px;background-color: pink;display: flex;justify-content: center;align-items: center;}.son {width: 50px;height: 50px;background-color: yellow;}

2.line-height

只对文本有效果，对定宽高的盒子没用。所以在文本水平垂直居中对的时候使用。

且只对单行文本有效，多行文本不可

line-height: 200px; //垂直
text-align: center; //水平

3.通过绝对定位的方式 absolute+负margin

需要知道子元素的宽高

        .father {width: 200px;height: 200px;background-color: pink;position: relative;}.son {width: 50px;height: 50px;background-color: yellow;position: absolute;top: 50%;left: 50%;margin: -25px 0 0 -25px;}

4.也是绝对定位 absolute+margin：auto；

需要将各方向的距离都设置为0；再设margin：auto；

        .son {width: 50px;height: 50px;background-color: yellow;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}

5.绝对定位+过渡

不需要子元素固定宽高

css3新增的transform：translate（-50%， -50%）即可

        .son {width: 50px;height: 50px;background-color: yellow;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)}

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

直接给父元素设置

为了明显观察，我们可以给它设置宽高与边框

注意：需要水平垂直的元素不能是块级元素（不然text-align:center不生效）

        .father {width: 200px;height: 200px;background-color: pink;border: 1px solid red;display: table-cell;vertical-align: middle;text-align: center;}

7.grid（网格布局）

给父元素设置display：grid

给子元素设：align-self:center; justify-self:center;

        .father {width: 200px;height: 200px;background-color: pink;border: 1px solid red;display: grid;}.son {width: 50px;height: 50px;background-color: yellow;align-self: center;justify-self: center;}

前端面试题--水平垂直居中的方法相关推荐

前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
array 前端面试题_web前端开发面试题汇总
前端面试题汇总第一部分HTML&CSS 1. 浏览器分类浏览器:IE,Chrome,FireFox,Safari,Opera. 内核:Trident,Gecko,Presto,Webkit ...
【前端】前端面试题整理
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离关于浏览器内核(渲染引擎) 浏览 ...
最近超火的公司前端面试题
前端面试题: 一个200*200的div在不同分辨率屏幕上下左右居中,用css实现 div{ position: absolute; width: 200px; height: 200px; left ...

前端面试题--水平垂直居中的方法

1.弹性盒子

2.line-height

3.通过绝对定位的方式 absolute+负margin

4.也是绝对定位 absolute+margin：auto；

5.绝对定位+过渡

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

7.grid（网格布局）

前端面试题--水平垂直居中的方法相关推荐

最新文章

热门文章