CSS水平居中
文章综合了一些各种常用的居中方法,使用场景大家仔细区分。
1.居中元素中的文字
可以用text-align属性进行水平居中,也可以将text-align的属性值设置为left和right进行左右对齐的设置。
CSS样式
.align-center{
height: 100px;
background-color: lightcoral;
/* 水平居中 */
text-align: center;
}
html元素
<div class="align-center">水平居中</div>
2.元素(盒子、容器)居中(利用margin实现)
如果是居中一个元素,而不是元素里面的文字可以用如下方式实现。
前提:
- 盒子必须制定了宽度width。
- 盒子的左右外边距设置为auto。
.align-center {
height: 100px;
width: 100px;
background-color: lightcoral;
/* 水平居中 */
margin: 0 auto;
}
<div class="align-center">
</div>
CSS垂直居中
1.单行文字垂直居中
利用line-height,将其属性值设置为容器相同高度,实现单行文字的垂直居中。
css代码
.heigt-center {
height: 100px;
background-color: lightgreen;
line-height: 100px;
}
html代码
<div class="heigt-center">
垂直居中
</div>
2.图片和文字垂直对齐(多用于头像姓名)
使用场景:一般做网页时需要让头像和姓名水平居中可以使用如下方法实现。
注意:
- 要给图片元素设置CSS属性:vertical-align: middle;
- 此属性需要设置给行内块元素,后面的文字才有效。
img {
border-radius: 25px;
width: 50px;
height: 50px;
vertical-align: middle;
}
<body>
<div class="head">
<img class="" src="img/head.jpg" />
子非鱼
</div>
</body>
CSS水平垂直居中
水平垂直居中常用下面.content中的三行代码实现,不过可以用.content2中比较简单的两行代码实现。
CSS样式
.content{
height: 100px;
background-color: skyblue;
/* 水平垂直居中 */
display: grid;
align-items: center;
justify-items: center;
}
.content2{
height: 100px;
background-color: lawngreen;
/*水平垂直居中*/
display: grid;
place-items: center;
}
html元素
<div class="content">
<p>水平垂直居中文字</p>
</div>
<div class="content2">
<p>水平垂直居中文字</p>
</div>
<div class="content">
<p>水平垂直居中文字</p>
</div>
<div class="content2">
<p>水平垂直居中文字</p>
</div>