块级元素以及行内元素居中显示

最新推荐文章于 2023-04-21 15:06:20 发布

husterxsp

最新推荐文章于 2023-04-21 15:06:20 发布

阅读量4.1k

点赞数 2

分类专栏： CSS 文章标签：块级元素行内元素居中显示 css

本文链接：https://blog.csdn.net/xsp_Login/article/details/44736201

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方法一：利用绝对定位实现元素垂直，水平居中显示：

<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #container{
            position: relative;
            width: 400px;
            height: 300px;
            background-color: #ABC;
        }
        #center{
            position: absolute;
            width: 120px;
            height: 120px;
            top: 50%;
            left: 50%;
            margin-top: -60px;
            margin-left: -60px;
            background-color: #ACC;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="center">
</div>
</div>
</body>
</html>

以上方法是我认为最好用的，不过缺点是需要知道元素的宽度和高度。通过设置需要定位的div元素为position: absolute, 然后通过top:50%, left:50%再加上margin-top: 负div高度的一半，margin-left:负div宽度的一半。
方法一也适用于img ,span等行内元素。

方法二：利用margin: 0 auto实现块级元素水平居中：

<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #container{
            width: 400px;
            height: 300px;
            background-color: #ABC;
        }
        #center{
            margin: 0 auto;
            width: 120px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="center"></div>
    </div>
</body>
</html>

此方法只能只能水平居中（并没有margin: auto 0这类写法）。另外需注意，必须设置元素的宽度才能实现居中！利用此方法若要实现img等行内元素居中需要加上display: block。

方法三：根据margin: auto 实现居中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #container{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
        }
        #div1{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: #69f;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
    </div>
</body>
</html>

方法四：利用text-align: center;实现块级元素内部的行内元素水平居中：

<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #container{
            width: 400px;
            height: 300px;
            background-color: #ABC;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="container">
    <img src="./1.jpg" alt="">
</div>
</body>
</html>

首先应当注意：

text-align: center;只作用于块级元素。但它不会控制元素的对齐，而只是影响元素内部内容。

如代码所示，text-align: center;作用于#container,但是使其内部的img元素（注意此处若是块级元素则不会居中）水平居中了。

方法五：利用vertical-align: middle; 实现垂直居中：

首先应当注意：

vertical-align: middle;只影响行内元素元素和替换元素，不影响块级元素中的内容对齐（和text-align截然不同）。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

现在，考虑一个问题，让一张图片在整个屏幕上居中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body{
            width:100%;
            height:100%;
        }
        #container{
            width:100%;
            height:100%;
            background: #ABC;
            text-align: center;
        }
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="container">
    <img src="./1.jpg" alt=""/>
</div>
</body>
</html>

运行以上代码，会发现，container的高度并没有占到整个屏幕。修改如下
给html元素也加上 height:100%;或者给container加上position: absolute。

现在，图片水平居中了，但没有垂直居中，代码做如下修改后就可以实现垂直也居中了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body{
            width:100%;
            height:100%;
        }
        #container{
            position: absolute;
            width:100%;
            height:100%;
            background: #ABC;
            text-align: center;
        }
        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="container">
    <span style="vertical-align:middle;display:inline-block;height:100%;"></span>
    <img src="./1.jpg" alt=""/>
</div>
</body>
</html>

display:inline-block是为了能够给span设置宽高，但是又不会产生换行。加上span并且也设置vertical-align:middle后，span和img 的中线就会对齐，从而实现效果img垂直居中。

方法六：根据display: table-cell 和 vertical-align: middle

vertical-align这个属性会设置单元格框中的单元格内容的对齐方式。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
        width:100%;
        height:100%;
    }
    #container{
        display: table-cell;
        width: 500px;
        height: 500px;
        text-align: center;
        vertical-align: middle;
        background-color: green;
    }
    #center{
        display: inline-block;
        width: 300px;
        height: 300px;
        background-color: red;
    }
</style>
</head>
<body>
<div id="container">
    <div id="center"></div>
</div>
</body>
</html>

通过添加display: table-cell;使得container变为表格元素，从而可以直接使用vertical-align: middle实现垂直居中。

方法七：根据CSS3属性display: box

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        #container{
            width:500px;
            height: 500px;
            background-color:green;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            -webkit-box-align: center;
            -moz-box-align: center;
            -ms-flex-align:center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack:center;
        }
        #center{
            width:300px;
            height:300px;
            background-color:blue;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="center"></div>
</div>
</body>
</html>

（先写到这里吧，笔记整理）

husterxsp

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
块级元素以及行内元素居中显示

方法一：利用绝对定位实现元素垂直，水平居中显示：<html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; border: 0; } #container{
复制链接

扫一扫

专栏目录