这是一道面试必考题，很多面试官都喜欢问这个问题
要实现上图的效果看似很简单，实则暗藏玄机，下面总结了一下CSS实现水平垂直居中的方式大概有下面这些，come
仅居中元素定宽高适用
- absolute + 负margin
- absolute + margin auto
- absolute + calc
居中元素不定宽高
- absolute + transform
2024年11月02日
这是一道面试必考题，很多面试官都喜欢问这个问题
要实现上图的效果看似很简单，实则暗藏玄机，下面总结了一下CSS实现水平垂直居中的方式大概有下面这些，come
仅居中元素定宽高适用
居中元素不定宽高
2024年11月02日
本方法适用图片尺寸不一，且需要根据页面大小实现自适应等比缩放的情况；
之前一直用的是背景图的方式来实现这个效果，可以这样做的一个弊端是不利于SEO 的优化，所以决定换种方式写，综合网上搜出来的文章，写了这个教程，供新手学习使用。
实现样式：
先上代码：
HTML结构
<div class="wide">
<div class="img-wrap">
<div>
2024年11月02日
CSS中文字居中显示的方式有以下五种：
将text-align属性值设置为center可以将文本居中显示。
.center {
text-align: center;
}2024年11月02日
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。
谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。
一、水平居中
使用CSS控制水平居中很简单：
2024年11月02日
如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中
忠告：能不写死高度就不写死高度
demo地址 https://jsbin.com/cuyifid/edit?html,css,output
2024年11月02日
/* HTML */
<div class='father'>
<div class='son'></div>
</div>
<style>
.father {
display: table-cell;
vertical-align: middle;
width: 300px;
height: 300px;
border: 3px solid red;
}
.son {
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
复制代码2024年11月02日
● ● ●
在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。
在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解: