一、对于行内元素：
text-align:center;
二、对于确定宽度的块级元素：
（1）margin和width实现水平居中
常用(前提：已设置width值)：margin-left:auto; margin-right:auto;
（2）绝对定位和margin-left: -(宽度值/2)实现水平居中
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;
}2024年11月02日
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。
谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。
一、水平居中
使用CSS控制水平居中很简单：