CSS之元素居中

最新推荐文章于 2020-11-29 16:45:30 发布

MAXLZ

最新推荐文章于 2020-11-29 16:45:30 发布

阅读量148

点赞数

分类专栏：【Web前端】CSS 文章标签： CSS 水平居中垂直居中 flex

本文链接：https://blog.csdn.net/qq_33635385/article/details/82852193

版权

【Web前端】CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、水平居中

水平居中分为了行级元素、块级元素（定宽块级元素、不定宽块级元素）。

（1）行级元素

行级元素居中只需在父元素中添加text-align:center属性即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #container{
            width:500px;
            height:300px;
            border:2px solid #00FFFF;
            text-align: center;
        }
        #img{
            height:200px;
            width:300px;
        }
    </style>
<body>
    <div id="container">
        <img id="img" src="img/1.jpg">
    </div>
</body>
</html>

（2）定宽块级元素

定宽块级元素使用margin：0 auto;进行居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #container{
            width:500px;
            height:300px;
            border:2px solid #00FFFF;
        }
        #img{
            display: block;
            height:200px;
            margin: 0 auto;
        }
    </style>
<body>
    <div id="container">
        <img id="img" src="img/1.jpg">
    </div>
</body>
</html>

（3）不定宽块级元素

不定宽元素使用display:inline;text-align:center。

二、垂直居中

（1）父元素高度确定的单行文本

设置height与line-height高度一致。

（2）块级元素垂直居中

1.已知子元素高度和父元素高度，直接使用margin-top属性，其值为父元素高度的一半减去子元素高度的一半；或者使用position子元素对于父元素绝对定位，top:50%,margin-top减去自身高度一半。

2.子元素相对父元素绝对定位，设置top、right、bottom、left四个方向均为0，并使用margin：auto进行垂直水平居中。

3.父元素中使用display:table-cell,vertical-align:middle实现对子元素的垂直居中。

4.使用transform进行垂直居中（存在兼容性问题）：子元素对于父元素进行绝对定位，top、left设置为50%，使用transform:translate(-50%,-50%),使用这种方式无需知道子元素高度。

5.使用flex实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #container{
            width:500px;
            height:300px;
            border:2px solid #00FFFF;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #img{
            height:200px;
            width:300px;
        }
    </style>
<body>
    <div id="container">
        <img id="img" src="img/1.jpg">
    </div>
</body>
</html>

MAXLZ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS之元素居中

一、水平居中水平居中分为了行级元素、块级元素（定宽块级元素、不定宽块级元素）。（1）行级元素行级元素居中只需在父元素中添加text-align:center属性即可。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&amp
复制链接

扫一扫