html5+CSS3的居中专题
完整链接：
https://pan.baidu.com/s/16IhFoBC2gNPZwosyS6UXxQ 密码: ft2j
–来自百度网盘超级会员V7的分享
居中问题
某个元素在其父亲中的位置才能叫居中对吧！！
a. 行内元素
-
水平居中：父标签设置
text-align:center， -
垂直居中：父标签设置line-height值等于父标签高度height，如
height:50px; line-height:50px;
b. 文本
-
水平居中：当前标签设置
text-align:center -
垂直居中：当前标签设置line-height值等于父标签的高度height，如
height:50px; line-height:50px;-
虽然用line-height能使文本垂直居中，但是长文本超出标签宽度****，则不能用line-height**，
-
举例原始情况下：
-
用line-height实现行间距与div高度一致则会导致文字超出div块：
-
用position进行居中即可，给文本添加标签
-
-
c. 块级元素
使用position属性。
使用top、bottom、left、right，可以设置块元素距离上下左右的距离，设置transform:translateX(-50%)，可以让元素回撤X轴方向的当前块的50%。
- 水平居中：
position: absolute;left:50%; transform:translateX(-50%);
<div class="blockcenter" style="background-color: antiquewhite; height: 100px; position: relative;">
<div class="box1" style="width: 50px;height: 50px; background-color: aqua; position: absolute;left: 50%; transform: translateX(-50%);">
</div>
</div>
-
垂直居中：
position: absolute;top:50%;transform: translateY(-50%);<div class="blockcenter" style="background-color: antiquewhite; height: 100px; position: relative;"> <div class="box1" style="width: 50px;height: 50px; background-color: aqua; position: absolute;top: 50%; transform: translateY(-50%);"> </div> </div>
-
同时居中：
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);<div class="blockcenter" style="background-color: antiquewhite; height: 100px; position: relative;"> <div class="box1" style="width: 50px;height: 50px; background-color: aqua; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"></div> </div>
行内块display：inline-block，
-
水平居中：父标签设置
text-align:center，如下，点开可看代码1<div class="blockcenter" style="background-color: antiquewhite; height: 100px; text-align: center;"> <div class="box1" style="width: 50px;height: 50px; background-color: aqua; display: inline-block;"></div> </div> -
垂直居中：
- 父标签设置line-height值等于父标签的高度height，注意，此时会出现基线问题（可以看3.0章节），如下：
<div class="blockcenter" style="background-color: antiquewhite; height: 100px; text-align: center; line-height: 100px;"> <div class="box1" style="width: 50px;height: 50px; background-color: aqua; display: inline-block;"></div> </div>要在子元素中设置
vertical-align:middle, 实现垂直居中。如下<div class="blockcenter" style="background-color: antiquewhite; height: 100px; text-align: center; line-height: 100px;"> <div class="box1" style="width: 50px;height: 50px; background-color: aqua; display: inline-block; vertical-align: middle;"></div> </div>
- 如代码示例，子元素box1设置为inline-block之后，就可以让父标签设置为text-align：center实现块级别元素的居中。使用
vertical-align:middle实现垂直居中
使用margin可以设置
margin: 0 auto;- 注意！！！当前标签必须设置宽度才能在父元素中居中！！！
d. 背景图的居中
放大镜设置为背景图
- 如果直接块元素或行内块元素，如div或者button等，则是将背景图居中于块元素，
- 可使用background-position：center；或者background-position：18px 20px；
.header-search form button {
width: 80px;
height: 36px;
vertical-align: middle;
background-color: #DD302D;
background-image: url(../images/serch_icon.png);
background-repeat: no-repeat;
background-position: center;
}
- 如果是行内元素，如span，则需要设置其为块元素，则是居中于其父元素
- 可以直接margin设置上下左右
span {
width: 16px;
height: 20px;
display: block;
background-image: url(../images/serch_icon.png);
background-size: 16px 20px; /*背景图大小和标签大小完全一致 */
background-repeat: no-repeat;
margin: 3px 5px;
}
1. line-height
1.1 作用
使文本内容垂直居中。通俗理解，设置内容的行高，如果行高与容器高度一致，便可垂直居中，如:div元素中
<div class='container'>文本内容</div>
设置css样式为，div容器高度30px，文本内容高度也为30px，则可居中。
.container {
height: 30px;
line-height: 30px
}
1.2 原理
行高包含了内容、上间距和下间距。也可以说是两个基线之间的距离。
2. 基线问题
2.1 我遇到的基线问题
文本和图片、button在一块，使内容无法居中。
-
注意：文本内容和input标签是对齐。
-
将img和button看作inline-block行内块，对应开头块级元素的居中问题
-
其中，文本的基线和图片以及button的基线对齐了。
在默认样式中，设置如下:
.text-test {
height: 70px;
line-height: 70px;
background-color: antiquewhite;
}
<div class="text-test">
<span>发疯的小孩 123123</span>
<img src="./images/seckill-icon.png"
style="" alt="">
<button style="width: 50px; height: 50px;"></button>
<input type="search" style="width: 100px; height: 40px; ">
</div>
如何解决，就要针对基线进行操作。
《基线问题的解决》
img标签和button标签的基线和文本的内容对齐，因此需要调整的是img和button的基线居中，
使用**：vertical-align: middle**;可以解决，如下：
img {
vertical-align: middle;
}
button {
vertical-align: middle;
}
从而，页面恢复正常
<div class="text-test">
<span>发疯的小孩 123123</span>
<img src="./images/seckill-icon.png" style="vertical-align: middle;" alt="">
<button style="width: 50px; height: 50px;vertical-align: middle;"></button>
<input type="search" style="width: 100px; height: 40px; ">
</div>
- 案例：
<div class="header">
<div class="container clearfix">
<div class="header-search rightfix">
<form action="#">
<input type="search">
<button>搜索</button>
</form>
</div>
</div>
</div>
/* #region 头部*/
.header {
height: 120px;
}
/* height: 120px;
line-height: 120px;
代码是为了子元素（行内元素）的垂直居中 */
.header-search form{
height: 120px;
line-height: 120px;
/* font-size为了清除行内元素之间的空格 */
font-size: 0;
}
.header-search form input {
width: 510px;
height: 36px;
/* 由于行内的基线问题，需要vertical-align: middle;配合line-height实现行内元素的对齐 */
vertical-align: middle;
border: 1px solid #DD302D;
}
.header-search form button {
border: none;
width: 80px;
height: 36px;
vertical-align: middle;
background-color: #DD302D;
/* background-image: url(../images/serch_icon.png);
background-repeat: no-repeat;
background-position: center; */
}
/* #endregion 头部*/
2.2 什么情况下会出现基线问题？
HTML 中的基线问题通常指的是在页面布局中，元素的基线（baseline）不对齐或错位，从而导致页面呈现出意外的效果。基线是用于对齐文本和其他行内元素的水平线，因此在设计页面时，正确地对齐基线是很重要的。
当特定标签与文本混排或布局时，可能会出现基线问题。以下是每个标签可能引发基线问题的一些示例：
<img>：假设你有一段文本与图片混排，但图片底部的基线与文本的基线不对齐，可能导致文本与图片之间的垂直间距不一致。
<p>This is some text <img src="example.jpg" alt="Example Image"> with an image.</p>
<input>：如果你的表单中包含文本和输入框，并且它们的基线不对齐，可能会导致表单布局看起来不整齐。
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<textarea>：在一个包含文本和<textarea>的表单中，如果<textarea>的基线与周围文本的基线不对齐，可能会导致表单的外观不一致。
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<button>：如果你的按钮与周围文本不对齐，可能会导致按钮看起来脱离上下文。
<p>This is some text <button>Submit</button>.</p>
<select>：当<select>元素与周围文本不对齐时，可能会使表单布局看起来不一致。
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<iframe>：当你嵌入一个<iframe>时，如果<iframe>的基线与周围文本不对齐，可能会导致页面布局问题。
<p>This is some text <iframe src="https://example.com"></iframe>.</p>
这些示例展示了如何可能出现基线问题的情况。通常，通过调整 CSS 样式来对齐这些元素的基线是解决问题的方法之一。
3. Text-align
可以使容器中的文本内容居中显示，包括了文本和基本的行内元素，如span、img、button、input、a等标签
<div class="text-test" style="text-align: center;">
<span>发疯的小孩 123123</span>
<img src="./images/seckill-icon.png"
style="" alt="">
<button style="width: 50px; height: 50px;"></button>
<input type="search" style="width: 100px; height: 40px;">
</div>
注意！！！text-align不能让块级元素居中，只能让块级元素的内容在当前块中居中，如
<div class="text-test" style="text-align: center;">
<p style="width: 100px;height: 70px; border: 1px solid;">4234325235</p>
</div>
其中p标签继承了div标签的text-align：center，是的p标签的内容在p标签中居中了，
想让整个块居中，还是要用position属性
参考文献
- https://blog.csdn.net/qq_41880073/article/details/115025963
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
