还不会CSS水平垂直居中？这里有12种方案

最新推荐文章于 2021-08-04 01:08:58 发布

前端向朔

最新推荐文章于 2021-08-04 01:08:58 发布

阅读量1.2k

点赞数 2

分类专栏： HTML/CSS 文章标签：水平居中垂直居中 css居中绝对定位居中 flexbox

本文链接：https://blog.csdn.net/u013778905/article/details/86539582

版权

本文详细介绍了12种CSS水平垂直居中的方法，包括行内元素的text-align，块状元素的margin，多元素布局，单行文本，图片，表格特性，绝对定位的多种方案，视口单位以及Flexbox布局。通过这些方法，无论在固定或动态尺寸的场景下，都能找到合适的居中解决方案。

摘要由CSDN通过智能技术生成

CSS水平垂直居中

今天读书的时候，愕然发现自己居然没有总结过水平垂直居中的方法，在印象中，这个知识点确实是很神奇的存在：

接下来我们就来总结一下该如何实现这个看似简单，实现起来却很难，但实现方法超级多的需求吧。

行内元素只需要在父元素设置水平居中就可以达到目的，也包含了img、 inline或者inline-block、inline-table和inline-flex等元素。

.container{
   
	text-align:center;
}

.center{
   
	margin: 0 auto;
}

在这里插入图片描述

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

方案一：

.container{
   
	font-size: 0;	//解决多个行内元素之间的间隙
	text-align: center;
}
.item

关注

专栏目录