CSS学习系列6—居中对齐

最新推荐文章于 2024-04-02 14:52:40 发布

diyuzhiwaicc

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量144

点赞数

分类专栏： # CSS学习系列

本文链接：https://blog.csdn.net/diyuzhiwaicc/article/details/103187837

版权

CSS学习系列专栏收录该内容

6 篇文章 0 订阅

订阅专栏

对于CSS页面布局来说，居中对齐很常用，在这里我们归纳总结一下各种居中对齐的方法。

1.页面居中对齐

居中对齐一个元素（如<div>）可以使用margin：auto，必须要设置元素的宽度，通过指定宽度，将两边的空外边距平均分配，达到页面元素居中对齐的目的。注意：如果不设置width属性（或设置为100%），居中对齐将不起作用。

<html>
<head>
<meta charset="utf-8"> 
<title>CSS元素居中</title> 
<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>

<div class="center">
  <p>元素居中对齐</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述

2.垂直居中—使用padding

CSS中有很多方式可以实现垂直居中对齐，一个简单的方式就是头部顶部使用padding。

<html>
<head>
<meta charset="utf-8"> 
<title>垂直居中</title> 
<style>
.center {
    padding: 45px 0;
    border: 3px solid green;
}
</style>
</head>
<body>
<div class="center">
  <p>我是垂直居中的。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述
通过运行结果我们可以看到，内容确实是垂直居中的，距离上下边框分别为45px。如果要水平方向也居中，只需要再添加text-align: center即可。

3.垂直居中—使用line-height

使用line-height来设置元素垂直居中，只需要设置line-height的值与height的属性值相等即可，所以前提条件是height的属性值必须给出。

<html>
<head>
<meta charset="utf-8"> 
<title>水平垂直居中</title> 
<style>
.center {
    line-height: 100px;
    height: 100px;
    border: 3px solid green;
    text-align: center;
}
</style>
</head>
<body>
<div class="center">我是垂直居中的。</div>
</body>
</html>

运行结果：
在这里插入图片描述

diyuzhiwaicc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习系列6—居中对齐

对于CSS页面布局来说，居中对齐很常用，在这里我们归纳总结一下各种居中对齐的方法。1.页面居中对齐居中对齐一个元素（如<div>）可以使用margin：auto，必须要设置元素的宽度，通过指定宽度，将两边的空外边距平均分配，达到页面元素居中对齐的目的。注意：如果不设置width属性（或设置为100%），居中对齐将不起作用。<html><head>...
复制链接

扫一扫