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

来源：互联网发布：爬虫软件干嘛用编辑：程序博客网时间：2024/06/06 14:10

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

<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>

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

0 0