CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了，一般面试官问的时候面试者都会回答出来，但是继续追问还有没有其他方法的时候有可能就说不出来了。
本着学习知识的目的，特在此纪录CSS实现水平垂直居中的多种方法。
准备工作
我们先写一个简单的HTML文件，方便我们接下来进行效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>水平垂直居中</title>
</head>
<body>
<div class="container">
<div class="inner">水平垂直居中</div>
</div>
</body>
</html>
/* CSS文件 */
.container{
width: 400px;
height: 400px;
border: 1px solid black;
}
.inner{
width: 100px;
height: 100px;
border: 1px solid red;
}
最终浏览器呈现的效果如下
水平居中
水平居中的方式有多种，总体来说可以使用flex、grid、text-align、margin等方法，我们要实现如下所示的效果
使用flex方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
display: flex;
justify-content: center;
}
只需在父DOM元素中新增以上CSS即可实现水平居中
使用margin方法
.inner{
width: 100px;
height: 100px;
border: 1px solid red;
/* 新增 */
margin: 0 auto;
}
注：这个方法适用于知道子dom元素宽度已知的情况下
使用text-align方法
要注意：
text-alignCSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，并不控制块元素自己的对齐，只控制他行内内容的对齐。
所以这个属性对于我的HTML文件是无效的，我们要把内部的div改为span即可生效，修改后的代码如下：
<body>
<div class="container">
<!-- 将div修改为span -->
<span class="inner">水平垂直居中</span>
</div>
</body>
CSS样式表修改为如下所示
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
text-align: center;
}
使用grid方法
.container{
width: 400px;
height: 400px;
border: 1px solid black;
/* 新增 */
display: grid;
grid-template-rows: 1fr; /* 让inner的高度占满 */
grid-template-columns: 1fr; /* 让inner的宽度占满 */
justify-items: center; /* 让inner水平居中 */
}
关于grid的更多介绍详见张鑫旭的
CSS实现水平垂直居中的数种方法整合的更多相关文章
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- css如何实现垂直居中（5种方法）
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
随机推荐
- vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )
一.路由的配置 路由 vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...
- ngx-echarts 图表数据动态更新
使用echarts绘制图表时,初次赋值数据正常展示,重新获取数据之后,图表没有跟着动态刷新.解决的办法是: html文件 <div echarts [options]="chartOp ...
- 16、基于状态的iptable+高级路由（重点）
-- 基于状态的iptables 如果按照tcp/ip来划分连接状态,有12种之多 但iptables里只有4种状态:ESTABLISHED.NEW.RELATED及INVALID 这两个 ...
- 主成分分析(PCA)原理与实现
主成分分析原理与实现 主成分分析是一种矩阵的压缩算法,在减少矩阵维数的同时尽可能的保留原矩阵的信息,简单来说就是将 \(n×m\)的矩阵转换成\(n×k\)的矩阵,仅保留矩阵中所存在的主要特性,从 ...
- FFMPEG+SDL实现视频播放器
一. 前言 基于学习ffmpeg和sdl,写一个视频播放器是个不错的练手项目. 视频播放器的原理很多人的博客都有讲过,这里出于自己总结的目的,还是会做一些概况. 二. 视频播放器基本原理 2.1 解封 ...
- 201871010118-唐敬博 《面向对象程序设计（java)》第十五周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 <https://www.cnblogs.com/nwnu-daizh/> 这个作业的要求在哪里 <https://ww ...
- 201871010128-杨丽霞《面向对象程序设计（java）》第十五周学习总结
201871010128-杨丽霞<面向对象程序设计(java)>第十五周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- springboot整合邮件
一.邮件相关知识补充 SMTP(Simple Mail Transfer Protocol) 即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.SMTP协议属 ...
- VIJOS-P1364 Likecloud-吃、吃、吃
JDOJ 1465: VIJOS-P1364 Likecloud-吃.吃.吃 https://neooj.com/oldoj/problem.php?id=1465 Description ...
- hdu1247-Hat’s Words-（字典树）
http://acm.hdu.edu.cn/showproblem.php?pid=1247 题意:给出一堆单词,求哪些单词是其中某两个单词拼接起来的. 题解:用字典树存储所有的单词,标记结束点,再次 ...