CSS水平居中、垂直居中及一些常见问题

CSS居中

1.CSS设置水平居中

①对于块级元素（如 div）

<!-- HTML代码 -->

<!-- CSS代码 -->

②对于行内元素（如 span）

<!-- HTML代码 -->

<!-- CSS代码 -->

CSS设置垂直居中

<!-- HTML代码 -->

<!-- CSS代码 -->

其他问题

CSS 去除 input 或 button 等选中（点击）时的带颜色边框

input {
outline: none;
}

CSS 加滚动条

body{
overflow:hidden; /*水平垂直方向均加滚动条*/
overflow-x:hidden; /*水平方向上加滚动条*/
overflow-x:hidden; /*水平方向上加滚动条*/
}

table 中设置水平和垂直对齐方式

<!-- HTML代码 -->
<table border="2" width="300" cellspacing="0">
<tr class="line_1">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="line_2">
<td>2.1</td>
<td>2.2</td>
</tr>
<tr class="line_3">
<td>3.1</td>
<td>3.2</td>
</tr>
</table>

①水平对齐

<!-- CSS代码 -->
/*
对 line_1 设置向左对齐（默认）
对 line_2 设置居中对齐
对 line_3 设置向右对齐
*/
.line_1{
text-align: left;
}

.line_2{
text-align: center;
}

.line_3{
text-align: right;
}

效果如下：



②垂直对齐

<!-- CSS代码 -->
/*为了便于观察，我们将行高设置为80px*/
tr{
height: 80px;
}
/*
对 line_1 不做任何改变
对 line_2 设置顶部对齐
对 line_3 设置底部对齐
*/
.line_1{
}

.line_2{
vertical-align: top;
}

.line_3{
vertical-align: bottom;
}

效果如下:



tips:

<!--
快速生成以下代码
div.photo>ul>li*9>img[src="../imgs/Summer/summer_0$.jpg"]
-->
<div class="photo">
<ul>
<li><img src="../imgs/Summer/summer_01.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_02.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_03.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_04
4000
.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_05.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_06.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_07.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_08.jpg" alt=""></li>
<li><img src="../imgs/Summer/summer_09.jpg" alt=""></li>
</ul>
</div>

CSS 中定义及使用全局变量

/*定义全局变量 timing*/
html{
--timing: 6s;
}

/*使用*/
.content .love:last-of-type {
animation: move var(--timing) infinite;
}