水平居中
内联元素
要使内联元素（如链接，
2024年11月02日
大家好，今天要给大家分享的是CSS实现垂直居中的几种方法，相信大家对元素的水平居中都非常了解了，如果是一个行内元素，就对它的父元素应用 “text-align:center”；如果是一个块级元素，就对它自身应用“margin：auto”。但是要对一个元素进行垂直居中，你能想到哪些方法呢？下面我给大家介绍几种基于不同场景实现元素垂直居中的方法，希望能对你有所帮助。
2024年11月02日
一、对于行内元素：
text-align:center;
二、对于确定宽度的块级元素：
（1）margin和width实现水平居中
常用(前提：已设置width值)：margin-left:auto; margin-right:auto;
（2）绝对定位和margin-left: -(宽度值/2)实现水平居中
2024年11月02日
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。
CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。
今天，我们就和大家分享一些居中的常用方法。
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
2024年11月02日
1.水平居中的 margin：0 auto;
关于这个，大家也不陌生做网页让其居中用的比较多, 这个是用于子元素上的，前提是不受float影响
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 3px solid red;
/*text-align: center;*/
}
img{
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
<!--html-->
<body>
<div class="box">
</div>
</body>2024年11月02日
1.1 行内元素
.parent {
text-align: center;
}
1.2 块级元素
1.2.1 块级元素一般居中方法
.son {
margin: 0 auto;
}
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;
}